Currently, I am in the process of developing a navigation bar for my website. One of the key features that I am looking to implement is animated slide outs that adjust their width based on the text content inside them. Additionally, I want all elements to be displayed on a single line. Here is the link to the jsfiddle showcasing my progress along with the snippet of jQuery code that I have written so far.
http://jsfiddle.net/2UEpd/26/ $(document).ready(function () {
$("#test").hide();
$(".title").hide();
$(".home").click(function (){
$("#test").slideToggle("slow");
});
$(".slideWrapper").hover(
function () {
$(this).children(".slideNav:eq(0)").stop().animate({
width: "112px",
height: "30px"
});
$(this).children(".slideBox:eq(0)").stop().animate({
left: "112px",
opacity: "1"
});
$(this).find(".title").show();
}, function () {
var $box = $(this).children(".slideBox:eq(0)");
$(this).children(".slideNav:eq(0)").stop().animate({
width: "0px",
height: "30px"
});
$(this).children(".slideBox:eq(0)").stop().animate({
left: "0px",
opacity: ".7"
});
$(this).find(".title").hide();
});
});
I've encountered some challenges while working on this project and any assistance or insights would be greatly appreciated.