I have been using flaunt.js ( Original Source, but have modified the initial css and html.
I have removed the class styles from ul and li so it uses just list tags.
But for some reason when I go into mobile.. it shows the 3 line menu button on my local page, but when I click it... things don't work as they do on the source.
I can't see the the menu properly.. I can't see the arrow to show there are drop down.
If someone could assist
thanks
<nav class="nav">
<ul>
<li>
Home
<ul>
<li >
Submenu item 1
</li>
<li >
Submenu item 2
</li>
<li >
Submenu item 3
</li>
<li >
Submenu item 4
</li>
</ul>
</li>
<li>
About
</li>
<li>
Services
<ul>
<li >
Submenu item 1
</li>
<li >
Submenu item 2
</li>
<li >
Submenu item 3
</li>
<li >
Submenu item 4
</li>
</ul>
</li>
<li>
Portfolio
</li>
<li >
Testimonials
</li>
<li>
Contact
</li>
</ul>
</nav>
Fiddle
You've removed necessary HTML and haven't compensated for that in the JS
Original JS:
// Append the mobile icon nav
$('.nav').append($('<div class="nav-mobile"></div>'));
// Add a <span> to every .nav-item that has a <ul> inside
$('.nav-item').has('ul').prepend('<span class="nav-click"><i class="nav-arrow"></i></span>');
Your modified JS:
// Append the mobile icon nav
$('.nav').append($('<div class="nav-mobile"></div>'));
// Add a <span> to every .nav-item that has a <ul> inside
$('.nav').has('ul').prepend('<span class="nav-click"><i class="nav-arrow"></i></span>');
See how your selector targets the .nav on both lines? This is adding the span in a place the rest of the script isn't expecting. In your JS to change the selector back to .nav-item and add the .nav-item class back to the root level <li>s.
You will also need to change:
// Dynamic binding to on 'click'
$('ul').on('click', '.nav-click', function(){
To:
// Dynamic binding to on 'click'
$('.nav-list').on('click', '.nav-click', function(){
There is more than one <ul> in your markup, so your blanket binding the click to <ul> is disrupting things too.
EDIT: Modified HTML, CSS, and JS: http://jsfiddle.net/xtt3j/. I'm not sure why you're so keen on doing everything without any classes. I'm all about reducing markup but I feel like this is going to be a harder to maintain (or to just wrap your head around). And finally, the arrow won't display in any of these Fiddles because it is an image.
I have modified your example code on http://jsfiddle.net/WdN8J/10/. In Chrome, there is initial padding offset so I put -webkit-padding-start: 0px. The conflict is that your dropdown nav has absolute position:
.nav ul > li > ul {
display:none;
position:absolute;
left:0;
width:180px;
}
So I added the following line in the click action:
$('.nav ul > li > ul').css({'position':'relative', 'width':'100%'});
Related
I am currently working on a navigation menu where any menu item doesn't fit onto available space get appended onto a hidden unordered list(ul) which can be accessed through a toggle button. What I would like to achieve is to display Group-1, Group-2...as inline-block without affecting css of child elements.I am trying to use below css;
.hidden-link{
display:inline-block;
}
However when I use this line it changes all children element's property to show in a row rather that in a table format. I have tried jquery as well but no win.
$(document).ready(function(){
$("ul.hidden-links").children().css("display","inline-block");
});
e.g
<div class="container">
<ul class='hidden-links hidden'>
<li>Group1
<ul class ="flash">
<li>item-1</li>
<li>item-1</li>
<li>item-1</li>
</ul>
</li>
<li>Group2
<ul class ="flash">
<li>item-1</li>
<li>item-1</li>
<li>item-1</li>
</ul>
</li>
<li>Group3
<ul class ="flash">
<li>item-1</li>
<li>item-1</li>
<li>item-1</li>
</ul>
</li>
</ul>
</div>
If I understand you correctly, you only need to select the direct children of the menu.
Then this is all you need.
$(document).ready(function(){
$("ul.hidden-links > li").css("display","inline-block");
});
If you want each element do be shown on a separate row, then you should be using display: block instead of `inline-block'.
More info on inline-block here http://www.w3schools.com/css/css_inline-block.asp
You can use simple css tricks to tackle this problem. Styled both ul in different css.
.hidden-links li{
display: inline-block;
}
li .flash li{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="topbar">
<ul>
<li class="active">
About Us
</li>
<li>
Services
</li>
<li>
Gallery
</li>
<li>
Get Quote
</li>
</ul>
</div>
How to set class Active on li 2,3,4... where hover, and remove class active has a go
Thank you!
Unless you need it to be active for some kind of query down the line (I personally don't know why you would, though), try CSS.
li:hover {
// Active class CSS here
}
You can add further selectors to the li to keep yourself from selecting other lists on the page, and it doesn't take any JavaScript, JQuery, or fancy coding.
The :hover psuedo-selector will make it where it applies the CSS to the element that you're hovering over.
I'm wondering if anybody could help. I'm using a Bootstrap Template from wrapbootstrap, called "Black Pearl". It contains a dropdown style menu that is structured like the below; It creates a menu with options, and you can specify submenus which drop down when the main option is clicked - as per example below. "Customers" is the main heading, and "New Cutomer" drops down when customers is clicked.
<ul class="side-menu shadowed">
<li> <a class="navmenu" url="login.php?" href="#"><i class="icon-home"></i>Home</a>
</li>
<li class="submenu"> <i class="icon-address-book"></i>Customers
<ul>
<li>New Customer
</li>
</ul>
</li>
</ul>
The javascript which i think runs this...
/* --------------------------------------------------------
Side Menu
-----------------------------------------------------------*/
(function(){
$('.side-menu > li.submenu > a').unbind();
$('.side-menu > li.submenu > a').click(function(e){
e.preventDefault();
if (!$(this).next('ul').is(":visible")) {
$('.side-menu > li ul').slideUp(150);
$(this).next('ul').slideDown(150);
}
else {
$(this).next('ul').slideToggle(150);
}
});
})();
Anyone have any ideas how i could toggle the menu change from a link outside the menu?
Thanks a lot :)
You can find the target menu trigger and programatically trigger a click event...
like if you want to trigger the customers menu, for easy selection of the element add a Class to the anchor element as given below
<li class="submenu"><i class="icon-address-book"></i>Customers
then
$('a.customers').click()
I have already got a nav menu at the top of my page, but now I am trying to expand a sub menu when I hover over one of these options. My first idea was to simply have a "div" section of the code like such
<div id= "expanded_menu"> <!-- sub menu option --> </div>
and show/hide it based on whether it's nav option was hovered over, but then I realized that the submenu would disappear as soon as I took my mouse off of it's corresponding nav menu button. Does anyone know a way to hover over an option, have that bring up a menu, and then be able to access the submenu without it disappearing?
The usual way to do this is with nested lists...
<ul id="main-menu">
<li>
First menu item
<ul class="sub-menu">
<li>Sub menu item</li>
...
</ul>
</li>
<li>Second menu item</li>
...
</ul>
And use the following CSS.
.sub-menu { display: none; }
#main-menu li:hover .submenu { display: block; }
As long as the sub-menu is nested in the parent menu item's div, your method should work. So your HTML structure would be:
<div class="main_menu_item">MainItem
<div class="sub_menu_item">Item1</div>
<div class="sub_menu_item">Item2</div>
</div>
Then you're still hovering on the main item when hovering on the sub-items.
However, I personally would implement this all in CSS -- search for "CSS menus" and you'll find a ton of resources.
Is it possible to attach html tag to others using Javascript?
<li> to other <li> ?
For instance, I'm creating dropdown menu.
I have div separate from the <ul> tag
<ul>
<li>menu1</li>
<li>menu2</li>
</ul>
<div id="submenu1">
<li>sub1</li>
<li>sub2</li>
</div>
When I click, say, a link, then I want sub menu to show up under menu1 so result would be like:
<ul>
<li>menu1</li>
<div id="submenu1">
<li>sub1</li>
<li>sub2</li>
</div>
</ul>
The reason why I choose <div> to be separated from beginning instead of nested in <li> tag is that if I set the <div> "hide", it hides but it occupies the space and created big space between menu1 and any content below, so my page looks weird like:
mypage
----------------------------
| menu1
|
| <------ big open space div is hiding
|
|
| hello content start here
EDIT
Thanks for the tip guys, I've solved the problem with removing div and have nested <ul> per suggestion. The elements are still being shifted when submenu shows up but used CSS position:absolute and specifying z-index helped.
This is invalid HTML. A li should be contained in either a ol or a ul element. Change
<div id="submenu1">
<li>sub1</li>
<li>sub2</li>
</div>
to
<ul id="submenu1">
<li>sub1</li>
<li>sub2</li>
</ul>
For your main problem, there is no need to put the div (or ideally ul) outside the main ul. When you hide an element by setting its visibility to hidden, it will still take up the empty space. To complete hide it and remove any space it was taking, set the display CSS property to none.
document.getElementById('submenu1').style.display = 'none';
Usually you put the submenu in another <ul> inside an <li> in your main menu (so that you get valid HTML), and hide it with display: none CSS property and show it on click.
<ul>
<li>menu item 1<ul class="submenu">
<li>sub 1</li>
</ul></li>
<li><a hrf="menu2">menu item 2</a></li>
</u>
Then in your CSS (or added using js):
ul.submenu {
display: none;
}
a:hover + ul.submenu, ul.submenu:hover {
display: block;
}
This one will work on modern browsers without any js! But you can do it with js too, of course.
This is usually done via CSS. You have the entire menu pre-created (note that nesting <div> within <ul> is invalid HTML):
<ul class="menu">
<li>menu1
<ul class="submenu">
<li>sub1</li>
<li>sub2</li>
</ul>
</li>
</ul>
and then you declare in CSS:
ul.submenu {
display: none;
}
Now you can remove or add the "submenu" CSS class from the <ul> through JavaScript, or you set the .style.display property.
Or even more elegantly (but less cross-browser compatible, if you still care for old browsers), entirely without JavaScript through pure CSS:
ul.menu > li:hover ul.submenu {
display: block;
}
ul.submenu:hover {
display: block;
}
If you use display: none in your CSS then the hidden element doesn't need any space:
HTML:
<ul>
<li>menu1
<ul id="submenu1">
<li>sub1</li>
<li>sub2</li>
</ul>
</li>
<li class="active">menu2
<ul id="submenu1">
<li>sub1</li>
<li>sub2</li>
</ul>
</ul>
CSS:
li ul {
display: none;
}
li.active {
display: block;
}
<ul>
<li>menu1</li>
<div id="submenu1" style="display: none">
<li>sub1</li>
<li>sub2</li>
</div>
<li>menu2</li>
</ul>
Try it, this will make the div take up no space. if you use visiblity: hidden then it will take up space.