i am new to this,so can one give reference to create multilevel drop down list.
As explain belove.
for example,
I have to create two dropdown list one is category and another is sub category.
When i am select one field in category then sub categoey will give me only those field which is sub part of category..
if i am select category1 then
category-1----->in subcategory dropdown sub1,sub2 are display
category-2----->sub3,sub4,sub5
like wise....
Here is simple solution.
// HTML
<ul>
<li>
A >
<ul>
<li>A1 >
<ul>
<li>A1A >
<ul>
<li>A1A1</li>
<li>A1A2</li>
</ul>
</li>
<li>A1B</li>
</ul>
</li>
<li>A2</li>
</ul>
</li>
<li>B</li>
</ul>
// CSS
ul li > ul{
display:none;
}
ul li:hover >ul{
display:block;
}
jsfiddle example
Related
I have a menu at the top of the page. On the bottom below the article I want to show the submenu items that are children or siblings of the active menu item (the item that I clicked on to get to the page in question).
That is, if I clicked on "Submenu item A" I want to see "Submenu item A" and "Submenu item B" in the bottom menu.
I want to do this using php or css, but not using javascript.
I don't want this to happen "on the fly" when hovering or something. I just want to show the childs and siblings of current item when that item has been clicked and I'm already on the target page to aid the user in navigating through the whole category.
Snippet showing what I want it to look like when "Menu item 1" or any of its submenu items are opened.
<ul>
<li>
Menu item 1
<ul>
<li>
<a href='item-1/item-a'>
Submenu item A
</a>
</li>
<li>
<a href='item-1/item-b'>
Submenu item B
</a>
</li>
</ul>
<li>
<a href='item-2'>
Menu item 2
</a>
<li>
</ul>
<article>Page contents</article>
<ul>
<li>
<a href='item-1/item-a'>
Submenu item A
</a>
</li>
<li>
<a href='item-1/item-b'>
Submenu item B
</a>
</li>
<ul>
Wrap the bottom ul with this code in php.
This script check if the path contains item-1, if so, he shows the ul otherwise it didn't.
<?php
$url = $_SERVER['REQUEST_URI'];
$url_parts = parse_url($url);
if (strpos($url_parts["path"], 'item1') !== false) {
?>
<ul>
<li>
<a href='item-1/item-a'>
Submenu item A
</a>
</li>
<li>
<a href='item-1/item-b'>
Submenu item B
</a>
</li>
<ul>
<?php } ?>
This can't be done with CSS alone. For it to work with PHP and no Javascript it will only change on page load.
so I have been having an issue with some PHP strings that I can't seem to figure out. The goal is to have the "parent" link remain as an active state whilst allowing the dropdown function to contine.
<li class="<?php echo($activePage == "releases" ? "active" : "")?>" class="dropdown">
Press <i class="fa fa-angle-down"></i>
<ul class="dropdown-menu">
<li class="<?php echo($activePage == "releases" ? "active" : "") ?>">Releases</li>
<li class="<?php echo($activePage == "clips" ? "active" : "") ?>">Press Clips</li>
<li class="<?php echo($activePage == "assets" ? "active" : "") ?>">Press Assets</li>
</ul>
</li>
So the goal here is to get the PRESS link to show an active state when either of the three releases, clips or assets
You'll notice in the first list I have two classes at the moment. The PHP echo class when infront does display the PRESS link its active state however doesn't allow for any drop down, thus rendering the other three links invisible, when I place the other class in the front, the drop down works but then the PRESS link doesn't show an active state.
Can anyone solve this issue for me? Thanks a lot!
This is the setup I used for a site to make the active parent element stay highlighted, as I walked down the tree:
#navigation ul.nav > li:hover ul a:hover,
#navigation ul.nav > li:hover, #navigation ul.nav > li:hover ul li:hover {
background: #3e4b51 none repeat scroll 0 0 !important;
text-decoration: none;
}
The menu setup is this:
<nav id="navigation" class="col-full" role="navigation">
<ul class="nav">
<li>
HOME
</li>
<li>
Level 1
<ul class="sub-menu">
<li>
Level 2
<ul>
<li>
Level 3
<ul>
<li>
Level 4 Item 1
</li>
<li>
Level 4 Item 2
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
i need to insert span or div to parent li. For spoiler or button to use it in classie.js
<ul>
<li class="parent">
<ul></ul>
</li>
</ul>
I know that i should use walker in wordpress... but i dont know function
my categories table
ID,PARENT,NAME,ORDER
ul > li > li ... like this i want sort my data with php function.
first i want take all in array. after use function.
$query = mysql_query("SELECT ID,PARENT,NAME,ORDER FROM categories");
$category = array();
if(mysql_num_rows($query)>0){
while ($rs= mysql_fetch_assoc($query))
$category[$rs['PARENT']][$rs['ORDER']] = array('id'=>$rs['ID'],'name'=>$rs['NAME']);
}
After how can i print according sortable menu ?
<ul>
<li>menu1
<ul>
<li>menu1a</li>
<li>menu1b</li>
</ul>
</li>
<li>menu2
<ul>
<li>menu2a</li>
<li>menu2b</li>
</ul>
</li>
<li>menu3
<ul>
<li>menu3a<ul>
<li>menu3a_a</li>
<li>menu3a_b</li>
</ul></li>
<li>menu3b</li>
</ul>
</li>
</ul>
I think you have to use recurse(0, $category); instead of recurse(0, $categories);
and for every category you have to call this function.
I have this menu structure:
(the inner <ul> tag can be surrounded by a custom <div>, every other structural change is a lot more difficult because the code is generated from a dynamic module system, written in PHP)
<div id="menu">
<div class="body-menu">
<ul>
<li class="current"><div class="body-menu">
Item1
<ul>
<li class="current"><div class="body-menu">
Sub-Item 1
</div></li>
<li class=""><div class="body-menu">
Sub-Item 2
</div></li>
</ul>
</div></li>
<li class=""><div class="body-menu">
Item 2
</div></li>
</ul>
</div>
<div class="menu-background"></div>
</div>
The goal is to display the inner <ul> after Item 1 on the left side as a sub menu instead of at the top with the other toplevel items..
Is there a way to do that without modifying the structure? Just with CSS or so?
UPDATE:
thanks for all the answers!
especially to besluitloos and Caelea, that's exactly what I'm looking for.
The parent <li> containing the second <ul> should be positioned relative and the contained <ul> should be positioned absolute.
Sometihing like:
ul li { position: relative ;}
ul li ul {position: absolute; top: 0; left: 145px;}
I wrote left: 145px but you can give any value you want to that, depending on how big you want your menu to be.
PS: Tip: don't use the same "body-menu" class on those divs it should be different for the big container, and not only. And I don't really think it's necessary to have that div inside those < li >.
Probably you want to do something like hiding the sub-menu and make it pop up or show up when the mouse is hovering. Take a look at http://cssmenumaker.com/builder/42231 for an example.
.body-menu > ul > li {
position:relative;
float:left;
padding-bottom: 1em;
}
.body-menu ul ul {
position:absolute;
left:0;
top:1.3em;
display:none;
}
.body-menu > ul > li:hover > ul {
display:block;
}
Is that what you're looking for?
EDIT: I'm sorry, IE doesn't play nice with inline-block. So you'll have to change that to 'inline'. Then you can leave out the bottom padding because that doesn't work on an inline element. Except if you float the element. edited the code above to work with float.
edit 2: typo.