I am working on a project on wordpress and making a main menu where all dropdown items are showing normally without hovering on it. I have hide all dropdown column at home page now I want to display specific dropdown if current page is its child item or main item. For example.
<ul class="menu">
<li class="menu-item">Page 1
<ul class="sub-menu active">
<li class="menu-item current_page_item">Page 1 Child A</li>
<li class="menu-item">Page 1 Child B</li>
<li class="menu-item">Page 1 Child C</li>
</ul>
</li>
<li class="menu-item">Page 2
<ul class="sub-menu">
<li class="menu-item">Page 2 Child A</li>
<li class="menu-item">Page 2 Child B</li>
<li class="menu-item">Page 2 Child C</li>
</ul>
</li>
<li class="menu-item">Page 3
<ul class="sub-menu">
<li class="menu-item">Page 3 Child A</li>
<li class="menu-item">Page 3 Child B</li>
<li class="menu-item">Page 3 Child C</li>
</ul>
</li>
</ul>
Now I want to show just Page 1 dropdown and if user goes to Page 2 (or then Page 2 Child A/B/C) then hide Page 1 dropdown and show Page 2 dropdown.
Please let me know if how can I do this by CSS or Javascript. CSS will be easy for me.
Thanks
I found a solution because after some struggle with lots of Classes and IDs I finally found a unique class with sub-menu so I hide all sub menu by
.menu-item ul
{
display: none;
}
After that I show active dropdown menu by
.menu-item .active {
display: block !important;
}
Thanks
Related
Usually, by default, I always saw that on mobile device clicking on the parent menu reveals submenu only and then if you click it again it opens the URL. But not on this site I'm working on, any ideas why it might override the default browser function and opens directly the parent link after the first click?
<nav id="nav">
<ul id="menu-primary-navigation" class="menu">
<li id="menu-item-30">Services
<ul class="sub-menu">
<li id="menu-item-4216" class="">Service 1</li>
<li id="menu-item-4215" class="">Service 2</li>
<li id="menu-item-4217" class="">Service 3</li>
</ul>
</li>
<li id="menu-item-1125" class="">About</li>
<li id="menu-item-1139" class="">Events</li>
</ul></nav>
It is hard to say whitout more information, but it will try next changes:
<nav id="nav">
<ul id="menu-primary-navigation" class="menu">
<li id="menu-item-30"><a>Services</a>
<ul class="sub-menu">
<li id="menu-item-4216" class="">Service 1</li>
<li id="menu-item-4215" class="">Service 2</li>
<li id="menu-item-4217" class="">Service 3</li>
</ul>
</li>
<li id="menu-item-1125" class="">About</li>
<li id="menu-item-1139" class="">Events</li>
</ul></nav>
Say for example, if you have menu bar with this structure:
<nav>
<ul class="nav">
<li class="menu1">Menu Item 1</li>
<li class="menu2">Menu Item 2
<ul>
<li class="menu2.1">Menu Item 2.1</li>
<li class="subMenu2">Menu Sub-Menu Item 2
<ul>
<li class="subMenu2.1">Menu Sub-Menu Item 2.1</li>
<li class="subMenu2.2">Menu Sub-Menu Item 2.2</li>
<li class="subMenu2.3">Menu Sub-Menu Item 2.3</li>
<li class="subMenu2.4">Menu Sub-Menu Item 2.4</li>
</ul>
</li>
<li class="menu2.2">Menu Item 2.2</li>
<li class="menu2.3"><a href="#">Menu Item 2.3</li>
</ul>
</li>
</ul>
</nav>
And the recorded class name subMenu2.2 is known, how would you go about in order to expanded this sub menu and its parent menu, so the contents of this menu can be viewed with an external call, rather than clicking on the menu bar itself.
So if subMenu2.2 was the item to be viewed, then the all the contents and menu bar section with class name menu2 would be shown or be in active state so it can be visible on the page.
Normally, to view an menu item you would work your way through the menu items, and on hover certain sub menus may be displayed.
My intended goal is to show the sub-menu or parent menu depending on the given/supplied class name.
You could give the pages a body id and style the menu or script the active state according to that. Here is an article that explains that further. I hope this helps.
css-tricks.com/id-your-body-for-greater-css-control-and-specificity
So I have a navigation bar with links and sub links. I currently have my links and sub links in the structure ul and li elements. The drop down navigation bar is designed using JavaScript, which is working as intended, minus one issue. I need the parent element to not disappear when the children element are shown. I have included a screenshot below along with the HTML and JS.
Children elements covering parent element
If someone provides an answer can you also explain why the parent gets covered up? I have tried to find this on stack and looked on the web and was not able to find exactly what I was looking for.
Thanks a bunch guys!
function main(){
$('.sub-elements').hide();
$('.main-elements').on('click',function(){
$(this).children().slideToggle(300);
});
}
$(document).ready(main);
<div class = "nav-bar">
<ul class = "nav-drop">
<li class = "main-elements">Link 1
<ul class = "sub-elements">
<li>Sub Link 1</li>
<li>Sub Link 2</li>
</ul>
</li>
<li class = "main-elements">Link 2
<ul class = "sub-elements">
<li>Sub Link 3</li>
<li>Sub Link 4</li>
<li>Sub Link 5</li>
<li>Sub Link 6</li>
</ul>
</li>
<li class = "main-elements"><a href='#'>Link 3</a>
<ul class = "sub-elements">
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
<li><a href='#'>Sub Link 3</a></li>
<li><a href='#'>Sub Link 4</a></li>
</ul>
</li>
</ul>
</div>
sub links in the structure ul and li elements. The drop down navigation bar is designed using JavaScript, which is working as intended, minus one issue. I need the parent element to not disappear when the children element are shown. I have included a screenshot below along with the HTML and JS.
Children elements covering parent element
If someone provides an answer can you also explain why the parent gets covered up? I have tried to find this on stack and looked on the web and was not able to find exactly what I was looking for.
Thanks a bunch guys!
It should work:
function main() {
$('.sub-elements').hide();
$('.main-elements').on('click', function () {
$(this).find('.sub-elements').slideToggle(300);
});
}
$(document).ready(main);
Maybe you forget to add the children class in jQuery
function main(){
$('.sub-elements').hide();
$('.main-elements').on('click',function(){
$(this).children('.sub-elements').slideToggle(300);
});
}
$(document).ready(main);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class = "nav-bar">
<ul class = "nav-drop">
<li class = "main-elements">Link 1
<ul class = "sub-elements">
<li>Sub Link 1</li>
<li>Sub Link 2</li>
</ul>
</li>
<li class = "main-elements">Link 2
<ul class = "sub-elements">
<li>Sub Link 3</li>
<li>Sub Link 4</li>
<li>Sub Link 5</li>
<li>Sub Link 6</li>
</ul>
</li>
<li class = "main-elements"><a href='#'>Link 3</a>
<ul class = "sub-elements">
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
<li><a href='#'>Sub Link 3</a></li>
<li><a href='#'>Sub Link 4</a></li>
</ul>
</li>
</ul>
</div>
I am really stuck here at the moment and just wanted to know if somebody could think of an easy solution to my problem. I have several nested <ul> items with a few <li> in each and
I want the following to happen:
Whenever I click on one <li> item and it contains another <ul> it should slide down and show me all the list items and at the same time close the other lists on the same "nesting level". I tried to realize this but I really don't want to write some code for every possible constellation and I think there is an easier way.
For better understanding: http://jsfiddle.net/7zTc2/1/
Somehow the example is not working, but if you copy the content into local files it works. I did the first three lists and I want it to work like this for all the "child"-lists as well. If somebody could help me I'd really appreciate that!
Good day! Based on what I understood from your problem, here's how I did it:
HTML Markup
<ul>
<li>
<span>value 1</span>
<ul>
<li>
<span>inner value 1</span>
<ul>
<li>inner inner value 1</li>
<li>inner inner value 2</li>
<li>inner inner value 3</li>
</ul>
</li>
<li>
<span>inner value 2</span>
<ul>
<li>inner inner value 1</li>
<li>inner inner value 2</li>
<li>inner inner value 3</li>
</ul>
</li>
<li>
<span>inner value 3</span>
<ul>
<li>inner inner value 1</li>
<li>inner inner value 2</li>
<li>inner inner value 3</li>
</ul>
</li>
</ul>
</li>
<li>
<span>value 2</span>
<ul>
<li>inner value 1</li>
<li>inner value 2</li>
<li>inner value 3</li>
</ul>
</li>
<li>
<span>value 3</span>
<ul>
<li>inner value 1</li>
<li>inner value 2</li>
<li>inner value 3</li>
</ul>
</li>
</ul>
CSS
li > ul {
display: none;
}
JQuery
$("ul > li").has("> ul").click(function(e) {
e.stopPropagation();
$(this).find("> ul").slideToggle();
$(this).siblings("li").find("> ul").slideUp();
});
$("ul > li").click(function(e) {
e.stopPropagation();
});
I am using mootools-more.1817.js...this is my HTML structure:
<ul id="categories">
<div id="admin">Admin Controls</div>
<li class="selected">Test
<ul>
</ul>
</li>
<div id="admin">Admin Controls</div>
<li>Test 2
<ul>
</ul>
</li>
<div id="admin">Admin Controls</div>
<li>Top Links
<ul>
<li id="article">Link 1</li>
<li id="article">Link 2</li>
<li id="article">Link 3</li>
<li id="article">Link 4</li>
</ul>
</li>
<div id="admin">Admin Controls</div>
<li>Lame Links
<ul>
<li id="article">Link 9</li>
<li id="article">Link 10</li>
</ul>
</li>
<div id="admin">Admin Controls</div>
<li>Awesome Links
<ul>
<li id="article">Link 11</li>
<li id="article">Link 12</li>
</ul>
</li>
</ul>
So I want to do two things:
Be able to drag each li item to another section and have it take all its children with it. E.g. if I am dragging the li that has the link Top Links, I want to drag not only the words Top Links, but also the div#admin, ul and li that are children of that parent li. Essentially all the children of each li.
I would also like to be able to drag items between lists of the children. So for instance, say I want to drag the link Link 2 from that ul to the section called Awesome Links and drop it between the links Link 11 and Link 12.
I have done this:
window.addEvent('domready', function(){
new Sortables('#categories', {
clone: true,
revert: true,
opacity: 0.7
});
});
What that does is drags JUST the li, and not the children of the li.
How do I achieve those?
Thanks.
First, you have invalid HTML by having div items in your categories list that are not in li tags themselves. The only immediate children to a ul can be li for a valid list.
Second, according to the documentation, "To enable sorting between lists, one or more lists or id's must be passed using an array or a selector" (http://mootools.net/docs/more/Drag/Sortables). That means, to move items between your sublists, each ul must be passed into a sortables group (different than the categories group). This should solve your issue #2.
I'm not yet sure why it would not drag the whole contents of the li, though it may be the invalid HTML is causing issues.