Hi guys i want to create a sort of mega slide out menu from a vertical menu but having a few difficulties doing so.
My html for the nav is a bog standard 3 tier menu e.g.
<ul>
<li>Level 1 Item 1
<li>Level 2 Item 1
<ul>
<li>Level 3 Item 1</li>
<li>Level 3 Item 1</li>
</ul>
</li>
<li>Level 2 Item 2
<ul>
<li>Level 3 Item 1</li>
<li>Level 3 Item 1</li>
</ul>
</li>
<li>Level 2 Item 3</li>
<li>Level 2 Item 4</li>
<li>Level 2 Item 5</li>
</li>
What i would like is illustrated in the image below:
I have the nav in place where i want it and i have it so when i hover over a 1st level item the 2nd level shows. Im just not sure on how to get the 3rd level to show underneatht he 2nd level items
Any help will be much appreciated.
Thanks
EDIT
Sorry guys forgot the CSS here's what i have, whether its correct for what i need to know im not sure:
.nav-container {float:left;}
#nav { width:220px; height:260px; font-size:13px;}
#nav li { text-align:left; list-style-type: none; position:relative; }
#nav li > ul {display:none;}
#nav li:hover > ul{
width:676px;
height:260px;
display: block;
position:absolute;
z-index:9999;
left:220px;
top:auto;
}
#nav ul li {
padding:0 20px;
display:inline;
}
At the moment this css positions the 1st level correctly and the second level shows in correct position with 2nd level items positioned correctly, im just not sure how to go about positioning the 3rd level items under the 2nd level items
EDIT 2
I have structured the nav as you guys have said, just didnt type it correctly!, i have edited the post to show this, thanks
Here is a good jumping off point with the code provided.
First problem, your structure.
Use a structure like this, as it will make it MUCH easier to target and style your levels deeper into the tree.
Fiddle: http://jsfiddle.net/SinisterSystems/hz45B/6/
Level 1
Level 2
Level 3
Level 3
Level 2
Level 3
Level 3
Level 1
Level 2
Level 3
Level 3
Level 2
Level 3
Level 3
<ul>
<li>Level 1
<ul>
<li>Level 2
<ul>
<li>Level 3</li>
<li>Level 3</li>
</ul>
</li>
<li>Level 2
<ul>
<li>Level 3</li>
<li>Level 3</li>
</ul>
</li>
</ul>
</li>
<li>Level 1
<ul>
<li>Level 2
<ul>
<li>Level 3</li>
<li>Level 3</li>
</ul>
</li>
<li>Level 2
<ul>
<li>Level 3</li>
<li>Level 3</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS:
li {
padding:25px;
border:1px solid #000;
list-style:none;
width:100px;
}
ul ul {
display:none;
}
ul > li:hover > ul {
display:block;
}
Fiddle: http://jsfiddle.net/SinisterSystems/hz45B/6/
Once you're at this point, for your third ul list, just apply this CSS:
make sure to have your ul ul set at position: relative;
ul ul ul {
position:absolute;
top:100%;
left:0;
}
Dirty Example, but you get the point:
http://jsfiddle.net/SinisterSystems/hz45B/7/
Related
I am trying to hide several menu items from my mobile menu using the nth-child selector in CSS.
Here is the source code HTML and CSS: https://jsfiddle.net/jf1r12wh/
The HTML is something like this:
<ul class="mobile">
<li>Item 1</l1>
<li>Item 2</li>
<li>Item 3</li>
<ul><li>Submenu item 1</li>
<li>Submenu item 2</li>
<li>Submenu item 3</li></ul></ul>
I want to use the nth-child (or similar) to hide Item 1 and 2 on the mobile menu, but I don't want it to hide Submenu item 1 and Submenu Item 2, which it's doing.
I'm using this:
.mobile li:nth-child(1){
display: none !important;
}
.mobile li:nth-child(2) {
display: none !important;
}
The problem is that it's applying this to the submenu as well. How can I make it not to do that, and only apply to the main menu items?
All you have to do is show that the rule should only apply to direct children via the use of >
Like this:
.mobile > li:nth-child(2) {
display: none !important;
}
As Paulie_D mentioned in his comment, this is a part of specificity.
EDIT:
Here is a working snippet:
.mobile li:nth-child(1){
color: red;
}
.mobile > li:nth-child(2) {
color: red;
}
<ul class="mobile">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>
<ul>
<li>Submenu item 1</li>
<li>Submenu item 2</li>
<li>Submenu item 3</li>
</ul>
</li>
</ul>
For future reference, I would also like to point out that the correct semantic for a ul inside a ul is for the second ul to be inside it's own li
"The children (direct descendants) of a ul element must all be li elements". I've made sure that my code snippet reflects this for you.
I have following menu:
<ul>
<li>Menu 1</li>
<li>Menu 2
<ul>
<li>Menu 2 - 1</li>
<li>Menu 2 - 2</li>
</ul>
</li>
<li>Menu 3
<ul>
<li>Menu 3 - 1</li>
<li>Menu 3 - 2</li>
<li>Menu 3 - 3</li>
</ul>
</li>
<li>Menu 4
<ul>
<li>Menu 4 - 1</li>
</ul>
</li>
image with result
On page menu1.php i need to see - image 1
On page menu1.php on hover effect on Menu 2 - image 2
On page menu2.php - image 2
On page menu21.php - image 2
So on page i need to see this page submenu and with mouse on other links change this submenu to submenu of the page, on which is the mouse.
Hope it's understandable.
the main idea would be to assign each of your 'li' elements a class, and do the following:
.classForLi1
{
/*some properties for the menu*/
}
.classForLi1:hover
{
/*some properties for the menu when hovered */
}
and the same for the other menus.
if you want a more specific answer, please try to solve this on your own first and tell us where you got stuck.like apohl wrote we will help you solve an issue, but not write the whole code for you from scratch.
Demo Fiddle
(alternative sub menu style)
The below will give you a starting point to do the menu itself, you can then e.g. set inline styles to display:block; on the sub menu ul element you wish displayed on one of your given .php pages.
HTML
<ul>
<li>Menu 1
<ul>
<li>Menu 1-1</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Menu 2-1</li>
</ul>
</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
CSS
body {
margin: 0;
padding: 0;
font-family:arial;
width:100%;
}
ul {
list-style:none;
background:#2E94C7;
padding:10px;
color:white;
}
}
body ul li {
position:relative;
}
ul, li {
margin:0;
padding:0;
}
li {
display:inline-block;
padding:10px;
}
ul li ul {
display:none;
position:absolute;
width:100%;
background:black;
margin:10px 0 0 -10px;
}
ul li ul li {
display:block;
}
ul li:hover ul {
display:block;
}
got a nested LI menu - what I want to be able to do is show all child ULs when any parent LI is hovered over. Ideally in just CSS? but jQuery is OK if not poss in CSS.
Menu code is:
<ul>
<li>Item 1
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>Item 2
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
</ul>
So for example - when Item 1 is hovered over - the submenu ULs for Item 1 AND Item 2 should show... easy? I cant seem to work it out.... :(
Under your current requirements, that the hover of the <li> should show the <ul> child elements of all sibling <li> elements this isn't possible without JavaScript (with or without a library, as CSS lacks the ability to select elements appearing previously in the DOM, including both ancestor-elements and previous siblings); however if you're willing to allow for the hover to take place on the parent <ul> element this becomes possible with simple CSS:
ul > li {
display: list-item;
}
li > ul {
display: none;
}
ul:hover > li > ul {
display: block;
}
JS Fiddle demo.
In the above the use of the child combinator (>) means this will show only the first level of <ul> elements, if that last rule is amended then all <ul> children can be shown:
ul:hover > li ul {
display: block;
}
JS Fiddle demo.
I am looking for some really simple vertical multilevel menu, but I did not find anything. My idea of menu is for example like this:
<ul id="menu">
<li>Item 1</li>
<li class="parent">Item 2
<ul>
<li> Sub 1</li>
<li> Sub 2</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5
<ul>
<li> Sub 1</li>
<li> Sub 2</li>
</ul>
</li>
<li>Item 6</li>
And I would like to at first hide all sub categories. And if I click on the some category, the page will load and one the category with class="parent" will show its category. My question is, how can I reach this only with css?
This is basically how a hover menu works; hide the <ul> by default and show it when being hovered.
jsFiddle
#menu li > ul {
display:none;
}
#menu li:hover > ul {
display:block;
}
If you want .parent to show as well just put it in with the hover rule:
jsFiddle
#menu li:hover > ul,
#menu li.parent > ul{
display:block;
}
to hide the sub categories you need to add these to css file
#menu li > ul { display:none;}
#menu ul li ul {display: none;}
#menu ul li.parent ul {display: block;}
I'm building simple site from Drupal but the primary and submenu are not aligned center as it should. I have tried many of CSS3 properties but none of them is working.
This is how it structured
<div class="nav">
<ul>
<li>Primary Menu 1</li>
<li>Primary Menu 2</li>
<ul>
<li>Submenu 2.1</li>
<li>Submenu 2.2</li>
</ul>
<li>Primary Menu 3</li>
<li>Primary Menu 4</li>
</ul>
</div>
I want to display both of primary and submenu to be horizontal and align center with CSS3, how can I do that, please provide completely new CSS code for me please.
Thank you very much.
I hope you are looking like this :-
HTML
<div class="nav">
<ul>
<li>Primary Menu 1</li>
<li>Primary Menu 2
<ul>
<li>Submenu 2.1</li>
<li>Submenu 2.2</li>
<li>Submenu 2.3</li>
<li>Submenu 2.4</li>
</ul>
</li>
<li>Primary Menu 3</li>
<li>Primary Menu 4</li>
</ul>
</div>
CSS
.nav ul {
background:lightgrey;
}
.nav ul li {
display:inline-block;
margin:0 5px;
position:relative;
}
.nav ul li ul {
display:none;
padding:0 10px;
}
.nav ul li:hover ul {
display:block;
position:absolute;
left:0;
top:19px;
right:0;
}
.nav ul li ul li {
display:block;
margin:5px 0;
padding:0;
}
Demo