I want to make a navigation bar with submenu's that slide out when clicked.
So I want to animate a unordered list when another unordered list item is clicked.
So i'm thinking something like: (excluding the CSS)
<ul id="menu">
<li id="filemenu">File</li>
<li id="reportmenu">Reports</li>
<li id="toolsmenu">Tools</li>
<li id="helpmenu">Help</li>
</ul>
<div class="fileSubmenu">
<ul class = "fileSubmenu sm">
<li>New</li>
<li>Open</li>
<li>Copy</li>
<li>Print Setup</li>
<li>Exit</li>
</ul>
</div>
jquery:
$(document).ready(function () {
$("#filemenu").click(function () {
$(".fileSubmenu").animate({left:'50px'});
});
});
So I would think that the entire 2nd list would slide to the right but it doesn't.
what do the experts suggest?
the basic structure http://jsfiddle.net/zLCWW/2/
Try this one:
$(document).ready(function () {
$("#filemenu").click(function () {
$("div.fileSubmenu").animate({paddingLeft:'50px'});
});
});
because with the left-attribute, you can only modify elements which are position:relative or position:absolute.
Here is a great demo on building and animating a slide out nav menu. This is fixed to left side of screen but you can tweak it to your needs.
Demo
You just need to make your CSS positioning use something other than the default (which is static).
Here's a demo
CSS:
.fileSubmenu {
position: relative;
}
If you have an affliction towards strictly using jQuery:
jQuery:
$('.fileSubmenu').css({'position': 'relative'}).animate({'left': '50px'});
Try this: FIDDLE
JS
$(document).ready(function () {
$("#menu li").click(function () {
$( ".fileSubmenu" ).animate({
width: "70%",
marginLeft: "50px"
}, 1500 );
});
});
Related
First things first, a fiddle: http://jsfiddle.net/d7wfv8w8/
I have a navbar with a logo, search form and a Categories link. When somebody moves over it with the mouse, it should open the wrapper-categories div, which is display: none; by default.
I got it working, except the div is closing when you then move the mouse over the div that opened. I thought I could get it to stay open if I used .navbar .toggle to tell it that the parent is .navbar and it should stay open as long as the mouse is anywhere over that parent div.
How can I achieve this?
Here is my HTML:
<div class="navbar">
<div class="wrapper-header">
<ul>
<li class="">Logo Here</li>
<li class="">Search Here</li>
<li class="">Categories</li>
</ul>
</div>
<div class="wrapper-categories">
Categories Here
</div>
</div>
And the jQuery:
$(".navbar .toggle").hover(function (event){
event.preventDefault();
$(".wrapper-categories").slideToggle("fast");
});
You can achieve this by binding the hover function to the element wrapping both wrapper-header and wrapper-catagories. This will cause the hoverOut to only be called when it leaves the wrapper for both elements. Keeping both of your required divs open.
Fiddle: http://jsfiddle.net/d7wfv8w8/5/
Late to the party but change your class' to ID's and give this a go. Works for me.
$(document).ready(function(){
$( "#toggle" ).hover(
function() {
$( "#wrapper-categories" ).slideDown({
left: "+=50",
height: "toggle"
}, 500, function() {
// Animation complete.
});
}
);
var inArr = {toggle:false, wrapper-categories:false};
$('#toggle, #wrapper-categories').mouseover(function(){
inArr [$(this).attr('id')] = true;
});
$('#toggle, #wrapper-categories').mouseout(function(){
inArr [$(this).attr('id')] = false;
setTimeout(function(){
if(!inArr.toggle && !inArr.wrapper-categories) {
$('#navArea').slideUp(500);
}
},100);
});
});
I have created a custom "subnavbar" that sits under bootstrap's navbar. It's based on the code from wrapbootstrap.
I want to enable smooth scrolling using scrolltop. I have the following Javascript:
$(document).ready(function(e) {
$('#subnav').bind('click', function(e) {
e.preventDefault();
$('html,body').animate({scrollTop: $(this.hash).offset().top});
});
});
However, I can't seem to make it work. Am I using the wrong # reference? Here is a bootply: http://bootply.com/62720
HTML snippet below:
<!-- Subnav bar -->
<div class="subnav subnav-fixed">
<ul class="nav nav-pills">
<li>Overview</li>
<li>Opening hours</li>
</ul>
</div>
<section id="Overview">
<h3>OVERVIEW</h3>
Thanks
Very simple and easy mistake to make "#subnav" should be ".subnav a" firstly because subnav is the class and secondly because you want the click binded to the link
Something like this will work. This will set top to 0 when there is no offset()
$('.subnav li a').bind('click', function(e) {
e.preventDefault();
var hashTag = this.hash;
var top = 0;
if ($(hashTag).offset()) {
top = $(hashTag).offset().top
}
$('html, body').animate({scrollTop:top}, 'slow');
});
Here is the update: http://bootply.com/62723
This is what I have come up with.
HTML
<ul class="treatment-menu">
<li>Always visible menu</li>
<ul class="nav-child">
<li>Hidden menu</li>
</ul>
</ul>
Hover function
$('.treatment-menu li').hover(function () {
$(this).find('.nav-child').show();
},
function () {
$(this).find('.nav-child').hide();
});
FIDDLE http://jsfiddle.net/HBMfB/3/
However I can not get the .navchild to display when .treatment-menu li is hovered.
Any ideas?
Thank you.
You can Just use Css for that
http://jsfiddle.net/PpYQS/
.nav-child {
display:none;
}
.treatment-menu:hover .nav-child
{
display:block;
}
If you are using jquery you can do a .toggle() instead of writing show() and hide()
http://jsfiddle.net/rbw8v/
$('.treatment-menu li').hover(function () {
$(this).find('.nav-child').toggle();
});
or .slideToggle() for slide effect.
$('.treatment-menu li').hover(function () {
$(this).find('.nav-child').slideToggle();
});
Actually I am trying to do jquery tabs. I have written a code that needs rework and probably better ways to implement. I think I could use function arguments to achieve this, but I am not sure. Can somebody tell me how to achieve this in a better way. Though my code works but I think it is rudimentary. I would also like only one tab to display a background color if this is active.
http://jsfiddle.net/5nB4P/
HTML:
<div id="nav">
<ul>
<li>First Tab</li>
<li>Second Tab</li>
<li>Third Tab</li>
</ul>
</div>
<div id="content">
<div class="tabs first">First Div content</div>
<div class="tabs">Second Div content</div>
<div class="tabs">Third Div content</div>
</div>
Script:
$(function() {
$("li :eq(0)").click(function() {
$("li").css("background","none");
$(this).css("background","red");
$(".tabs:gt(0)").hide();
$(".tabs:eq(0)").show();
})
$("li :eq(1)").click(function() {
$("li").css("background","none");
$(this).css("background","red");
$(this).css("background","red")
$(".tabs:gt(1), .tabs:lt(1)").hide();
$(".tabs:eq(1)").show();
})
$("li :eq(2)").click(function() {
$("li").css("background","none");
$(this).css("background","red");
$(".tabs:lt(2)").hide();
$(".tabs:eq(2)").show();
})
})
There is a much better way to achieve this. Here you go
$(function() {
$("li").click(function() {
$(this).css("background","red").siblings().css("background","none");
$(".tabs").hide().eq($(this).index()).show();
return false;
});
})
Working Demo
As #Niels mentioned for setting the background style you can have a dedicated class(active) and add/remove this class instead of setting the inline sytle.
FYI..In the above code $(this).index() gives the position of the first element within the jQuery object relative to its sibling elements
CSS:
.active {
background-color:red;
}
JQuery:
$('li').click(function(){
$this = $(this);
$this.addClass('active').siblings().removeClass('active');
$('.tabs:eq(' + $this.index() + ')').show().siblings().hide();
});
Here is a demo: http://jsfiddle.net/5nB4P/6/
Here is the way that I updated this to make it smaller and I believe to be more effective and easier to use:
http://jsfiddle.net/5nB4P/7/
Code:
$("#nav ul li").click(function(){
var id = $(this).attr("rel");
$("#nav ul li").each(function(){
$(this).removeClass("active");
});
$(this).addClass("active");
$("#content div").each(function(){
$(this).hide();
});
$("#"+id).show();
});
Do you mean this? http://jsfiddle.net/tsukasa1989/5nB4P/1/
$(function() {
$("#nav li").click(function(){
// Handle active status
$(this).addClass("active").siblings().removeClass("active");
// Show the tab at the index of the LI
$(".tabs").hide().eq($(this).index()).show();
})
// Don't forget to set first tab as active one at start
.eq(0).addClass("active");
})
If you want to style the active tab use
#nav li.active{}
My approach doesn't use arguments, but HTML class and id references to shorten things: http://jsfiddle.net/ZScGF/1/
I have a project that uses drop-down menus that are nested ul's, like so:
<ul id="nav">
<li id="thome" class="navtab">
HOME
<ul id="subnav_home" class="submenu">
<li>Dashboard</li>
<li>SMS</li>
<li>Email</li>
<li>Twitter</li>
</ul>
</li>
</ul>
Using jQuery, I've added a .hover() to the .navtab li that .show()s the .submenu ul. The problem is that when the cursor moves into the new ul, the .hover()-out for the .navtab fires, .hide()ing the sub-menu, despite the fact that I have the height of the li so that it entirely wraps the .submenu ul.
I've tried adding a delay to the .hide(), but if you pass your cursor over the navtab bar quickly, you get all of the sub-menus at once.
Any solutions for me? Here's the relevant JavaScript. The hide() function is identical to .show() except that it shrinks the height and hides the ul (obviously).
$('.navtab').hover(
function(){
tabShowSubnav($(this).attr('id'));
},
function(){
tabHideSubnav($(this).attr('id'));
});
function tabShowSubnav(menu){
var sb = '#' + menu + ' > .submenu';
var tb = '#' + menu;
$('.navtab').each(function(){
if (!$(this).hasClass('current_page')){
$(tb).addClass('nav_hover');
}
});
$(tb).css('height','239px');
$(sb).show();
}
$('.navtab').hover(
function() {
$(this).children(".submenu").show().children('current_page').addClass("nav_hover");
},
function() {
});
$(".submenu").mouseout(function(){
$(this).hide();
});
$('.navtab').hover(
function() {
$(this).children(".submenu").show().children('.current_page').addClass("nav_hover");
},
function() {
$(this).children(".submenu").hide();
});
This worked for me.
I finally had to go with the jQuery plugin hoverIntent, that ignores children for the purpose of mouseout.