I'm currently setting up a menu including sub menu, built on Wordpress categories. Basically, I'm retrieving all the top level categories, and then build a submenu on each, with all the posts from that parent category.
So the structure looks like this :
<ul class="menuCat">
<li> lifestyle
<ul class="show-hide">
<li>Article #7</li>
<li>Article #5</li>
<li>Article #3</li>
</ul>
</li>
<li> musique
<ul class="show-hide">
<li>Article #8</li>
<li>Article #7</li>
<li>Article #2</li>
<li>Article #1</li>
<li>Article #3</li>
</ul>
</li>
</ul>
<div id="content">...
The sub menus are set to display:none. When a category gets clicked, the submenu ul appears (using jQuery toggle) under the main menu. I'm running it locally so I can't give you a live example, but the way it works is the same as when you hit the "categories" link here : http://wpshower.com/demo/?theme=imbalance.
My problem is that with this structure and for what I want to visually achieve (c.f previous url), I don't see any other option that putting the submenu block in an absolute position. But if I do so, I need to push the rest of the content down, when a menu is triggered. What I've tried so far, is to set a margin-top based on the height of the currently viewed submenu. Unfortunately, neither height or outerHeight could help me...
Any ideas ?
Thanks!
Can you go into more detail about why you need to position absolute? Looks to me like you could achieve what you want by having all your submenus statically positioned below the top level menu, using jQuery to ensure only one is shown at a time.
By having them statically positioned the submenu will push the content below it down when it expands, and as long as all but one submenu is always set to display: none; you won't even know it's there.
For this to work however, you'll need to change the structure of your html though. The submenu items will need to be in a div below the top level menu list, not within it.
<ul class="menuCat">
<li> lifestyle
</li>
<li> musique
</li>
</ul>
<div id="submenu-container">
<ul class="show-hide lifestyle">
<li>Article #7</li>
<li>Article #5</li>
<li>Article #3</li>
</ul>
<ul class="show-hide musique">
<li>Article #8</li>
<li>Article #7</li>
<li>Article #2</li>
<li>Article #1</li>
<li>Article #3</li>
</ul>
</div>
<div id="content"></div>
$(function () {
$('.menuCat > li').click(function (e) {
var target = $('.show-hide.' + e.target.title);
$('.show-hide').not(target).hide();
target.toggle();
});
});
ul.menuCat li {
display:inline-block;
vertical-align: top;
}
ul.show-hide {
display: none;
background-color:lightgrey;
}
#content {
height: 200px;
width: 100%;
background-color: red;
}
For an example see this demo: http://jsfiddle.net/ijoukov/PCgxR/
Some news, I think I can't modify the HTML structure because the submenus are built in the same time as the parent list-item, within the 'start_el' wordpress function. That function gets called for each category link in the menu.
Related
I'm using a ul with several child lis for navigation with html/javascript and css. Problem is, on tapping, it selects the Menu1 text (like it would when you want to copy text), while opening the menu. Using Windows 8, ie11, on surface tablet. I don't want the text selected, how can I stop this?
<ul id="nav" class="dropdown dropdown-horizontal">
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
<li aria-haspopup="true" style="cursor:pointer"><span class="dir">Menu1</span>
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
</ul>
</li>
</ul>
Maybe try something like this:
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
And then CSS
li {
position:relative;
}
li > a {
position:absolute;
display:block;
height:100%;
top:0;
left:0;
z-index:2;
}
This would put the anchor on top of the text, thereby making it clickable but not allowing the text to be copyable.
I'm creating a website for a project and i'm not allowed to use frameworks (so no bootstrap but jquery is allowed.), earlier i had a problem where the navigation bar when collapsed (screen width under 800px) has all the individual links expanded, rather than being in individual categories.
I've now fixed that but i've now got this problem where the menu's wont stay open / the arrows when clicked just take you to the subcategories heading. This makes the site unusable for mobiles essentially as no one will think to long click a tab to open each one.
I've uploaded this website to
here
The Html nav bar
<nav role="navigation" id="cssmenu">
<ul>
<li>Home</li>
<li class="has-sub">Courses
<ul>
<li>Digital Media</li>
<li>Web Development</li>
<li>Journalism</li>
<li class="last">Information & Communications</li>
</ul>
</li>
<li class="has-sub">Facilities
<ul>
<li>Societies</li>
<li>Jobs and Placements</li>
<li class="last">Library</li>
</ul>
</li>
<li class="has-sub active">Manchester & Student Life
<ul>
<li>Travel</li>
<li>Attractions</li>
<li class="last">Nightlife</li>
</ul>
</li>
<li class="has-sub">Student Help
<ul>
<li>Finance</li>
<li>Student Union</li>
<li class="last">Assistance</li>
</ul>
</li>
<li class="last">Contact</li>
</ul>
</nav>
The Jquery script
( function( $ ) {
$( document ).ready(function() {
// Cache the elements we'll need
var menu = $('#cssmenu');
var menuList = menu.find('ul:first');
var listItems = menu.find('li').not('#responsive-tab');
// Create responsive trigger
menuList.prepend('<li id="responsive-tab">Digi-Co</li>');
// Toggle menu visibility
menu.on('click', '#responsive-tab', function(){
listItems.slideToggle('fast');
listItems.addClass('collapsed');
});
});
} )( jQuery );
The css can also be found
here
Any help will be appreciated
Thank you.
I am using it in a drop down menu system. on mouse hover on a link the image of a parent div got switched and on mouse out it reverts the image. this variable I am using in html. Is there a way I can put this variable in my css sheet and call through an id or class?
In <li> tag you can see the mouseover and mouseout, I want to give an class ot id to call this variable.
This is my html
<div onmouseover="changeImage(fashionSrc)" onmouseout="changeImage(fashionSrc1)">
<h3>Casuals</h3>
</div>
<ul>
<li onmouseover="changeImage(fashionSrc2)" onmouseout="changeImage(fashionSrc1)">Menu 1</li>
<li onmouseover="changeImage(fashionSrc3)" onmouseout="changeImage(fashionSrc1)">Menu 2</li>
<li onmouseover="changeImage(fashionSrc4)" onmouseout="changeImage(fashionSrc1)">Menu 3</li>
<li onmouseover="changeImage(fashionSrc5)" onmouseout="changeImage(fashionSrc1)">Menu 4</li>
<li onmouseover="changeImage(fashionSrc6)" onmouseout="changeImage(fashionSrc1)">Menu 5</li>
<li onmouseover="changeImage(fashionSrc7)" onmouseout="changeImage(fashionSrc1)">Menu 6</li>
</ul>
onMouseOver = "this.src="../your_path/image1.png"; //or anything else
onMouseOut = "this.src="../your_path/image2.png"; //or anything else
Consider unobstrusive javascript, link 1 link 2
Is there a way I can put this variable in my css sheet and call
through an id or class?
No afaik. What you can do is modify the element's class and define those in your CSS. You should use the :hover pseudo-class instead of JS tricks in this case anyway.
Here is the simple way to create a menu with drop-down. try this.
HTML like this.
<div class="drop-down">
<h2></h2>
<ul>
<li>Menu 1</li>
...
</ul>
</div>
Style like this.
.drop-down {
position:relative;
height:40px;
}
.drop-down h2 {
... //Some style for heading
}
.drop-down ul{
display:none;
position:absolute;
top:40px; // Equal to drop-down height;
left:0;
}
//Display the submenu, when hover
.drop-down:hover ul {
display:block;
}
I have a list where every item has a sublist. To style them i have used CSS.
<ul class="left">
<li class="itemc">Item 1
<ul class="subitem">
<li>Subitem1</li>
<li>Subitem2</li>
<li>Subitem3</li>
<li>Subitem4</li>
</ul>
</li>
<li class="itemc">Item 2
<ul class="subitem">
<li>Subitem1</li>
<li>Subitem2</li>
<li>Subitem3</li>
<li>Subitem4</li>
</ul>
</li>
<li class="itemc">Item 3
<ul class="subitem">
<li>Subitem1</li>
<li>Subitem2</li>
<li>Subitem3</li>
<li>Subitem4</li>
</ul>
</li>
<li class="itemc">Item 4
<ul class="subitem">
<li>Subitem1</li>
<li>Subitem2</li>
<li>Subitem3</li>
<li>Subitem4</li>
</ul>
</li>
</ul>
The whole script can be found here
My problem is when I press an item from the main list, the sub-list is shown, but the other items from the main list go one over the other. How or what should I modify to make it work? I mean, when an item is clicked the sublist to be shown and the next item to be aligned to the end of the sublist?
Add two additional properties to your .left li class:
.left li {
float: left;
clear: left;
}
Updated jsfiddle
The problem comes from the fact that when the subitem opens, the items positions aren't changed. They stay at the same place.
As you can see here (3D view from Firefox), items 3 and 4 still have their original place (item 2 clicked), and the subitem comes above them.
The subitem is actually not considered as being in the item. So when it's being displayed, the other items don't see any change in the item above them and stay at the same place. But the text is affected by the submenu though. And so it gets put at the end of it. All of this is due to the float: left; on the subitem.
To fix that, you just need to add clear: both; or clear: left; to .left li in the CSS.
EDIT: Seems I am late sorry...
Little note: You should avoid having .left li after .left .submenu li, it could replace some of the properties you put before.
I'm trying to make a navigation dropdown with jQuery that looks like this:
<ul id="home" >
<li class="navtab">TABANME</li>
<li class="homesub">Some link</li>
<li class="homesub">Some link</li>
<li class="homesub">Some link</li>
</ul>
The <li> .navtab is visible at all times - the sub-menu items start out hidden. I've attached the .hover() to the <ul> element (#home), but when the cursor enters the sub-menu <li> elements, the mouseout for #home fires, and the sub-menu items hide.
I know this has to do with event bubbling and mouseover/mouseout, but I can't figure out the logic of how to keep the menu open while the cursor is over the entire <ul>. The jQuery I currently have is:
$('#thome').hover(
function(){
tabShowSubnav($(this).attr('id'))
},
function(){
tabHideSubnav($(this).attr('id'))
});
function tabShowSubnav(menu){
var tb = '#' + menu;
var sb = '.' + menu.slice(1) + 'sub';
$(tb).css('height','239px');
$(sb).show();
}
Any suggestions?
Do yourself a huge favour and change how you structure your menu markup to:
<ul id="home" >
<li class="navtab">
TABANME
<ul class="submenu">
<li>Some link</li>
<li>Some link</li>
<li>Some link</li>
</ul>
</li>
</ul>
And put the hover event on li.navtab to make the submenu visible. You'll find this much easier to do. For example, the CSS:
ul.submenu { display: none; }
with:
$(function() {
$("li.navtab").hover(function() {
$(this).children("ul.submenu").show();
}, function() {
$(this).children("ul.submenu").hide();
});
});
and you're most of the way there.
That all being said, I'd highly suggest using an existing jQuery menu plugin. There are lots of these about. I've had relatively good experience with superfish. There's little point reinventing this particular wheel.