On small screens I have a hamburger menu that drops down to show a some list items. I am trying to add sub-menus onto some of these items.
I have tried multiple variations of inserting submenus but none appear. The regular hamburger dropdown functions fine but doesn't change at all when I add the submenus.
Here is the html without adding submenus.
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span> </label>
<ul class="menu">
<li>Getting Started</li>
<li>Property Information</li>
<li>Home Financing</li>
<li>Loan Approval</li>
<li>Loan Closing</li>
<li>Home Ownership</li>
</ul>
How would I add a submenu to this within one of those items?
Just add a ul inside the appropriate li block as below. You will need to play with the css to make it display appropriately.
HTML
<nav>
<ul>
<li>Getting Started</li>
<li>Property Information
<ul>
<li>Sub-Property Information</li>
<li>Sub-Property Information 2</li>
</ul>
</li>
<li>Home Financing</li>
<li>Loan Approval</li>
<li>Loan Closing</li>
<li>Home Ownership</li>
</ul>
</nav>
CSS
<style>
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
</style>
Related
I want to display 7-9 html links in one line, but whenever I add another link, the last link goes down and forms another row. I want to put them in one line.
like
<link1> <link2><link3><link4><link5><link6><link7>
<li>HOME
<li>Check In</li>
<li>Check Out</li>
<li>Re-Issue</li>
<li><!--movies er drop down-->
Student<span class="arrow">▼</span>
<ul class="sub-menu">
<li>Approve</li>
<li>Fine</li>
<li>Check List</li>
<li>Department</li>
</ul>
</li>
<li>Faculty<span class="arrow">▼</span>
<ul class="sub-menu">
<li>Books issued</li>
<li>Search</li>
</ul>
</li>
<li> SEARCH<span class="arrow">▼</span>
<ul class="sub-menu">
<li>Student</li>
<li>Faculty</li>
<li>Books</li>
<li>History</li>
</ul>
Use these styles:
ul {
white-space: nowrap;
}
li {
vertical-align: top;
display: inline-block;
padding: 0em 0.5em;
}
.sub-menu li {
display: block;
}
Fiddle
In the list that you put them in make a class and then in css add to the class: display:inline;
example: http://jsfiddle.net/JoshuaHurlburt/34nzt2d1/
<ul class="links">
Google
Google1
Google2
Google3
</ul>
I have a question about my sitemap if you look at the code you see ul and li. But every UL is below the other and i want it to be side by side. Every new UL side by side. How doe i do this? Working with first-child? ( the sitemap is inside my )
Sitemap
<ul>
<li>Opleiding</li>
<ul>
<li>Visie & Beleid</li>
<li>Opbouw Studieprogramma</li>
<li>Competenties</li>
<li>Diploma</li>
<li>Beroepen</li>
</ul>
<li>Onderwijsprogramma</li>
<ul>
<li>Mededelingen</li>
<li>Uitagenda</li>
<li>Propedeuse</li>
<li>Verdieping 1</li>
<li>Verdieping 2</li>
<li>Afstuderen</li>
</ul>
<li>Organisatie</li>
<ul>
<li>Contact</li>
<li>Blog</li>
<li>Docenten</li>
<li>Onderwijsbureau</li>
<li>Stagebureau</li>
<li>Buitenlandbureau</li>
<li>Examencommissie</li>
<li>Decaan</li>
</ul>
<li>Stages en Projecten</li>
<ul>
<li>Stages</li>
<li>Projecten</li>
</ul>
</ul>
This is my CSS
footer{
width: 100%;
position: absolute;
top: 317%;
left: -10%;
background: lightgrey;
margin:10%;
padding: 2%;
}
Try display inline-block or float left on the ul's you want side by side. I recommend adding classes to make the styling easier
HTML:
<ul>
<li>Opleiding</li>
<ul class="sitemap">
<li>Visie & Beleid</li>
<li>Opbouw Studieprogramma</li>
<li>Competenties</li>
<li>Diploma</li>
<li>Beroepen</li>
</ul>
<li>Onderwijsprogramma</li>
<ul class="sitemap">
<li>Mededelingen</li>
<li>Uitagenda</li>
<li>Propedeuse</li>
<li>Verdieping 1</li>
<li>Verdieping 2</li>
<li>Afstuderen</li>
</ul>
<li>Organisatie</li>
<ul class="sitemap">
<li>Contact</li>
<li>Blog</li>
<li>Docenten</li>
<li>Onderwijsbureau</li>
<li>Stagebureau</li>
<li>Buitenlandbureau</li>
<li>Examencommissie</li>
<li>Decaan</li>
</ul>
<li>Stages en Projecten</li>
<ul class="sitemap">
<li>Stages</li>
<li>Projecten</li>
</ul>
</ul>
CSS:
footer .sitemap {
display: inline-block;
OR
float: left;
}
Well, for starters your markup is invald. If you want to nest ULs inside of another UL, it needs to be inside of an LI
<ul>
<li>Title
<ul>
<li>Sub-Title</li>
</ul>
</li>
</ul>
From there, you probably just need something like this:
footer > ul > li {
float:left;
width:50%;
}
http://jsfiddle.net/fTCY5/
I've created a drop-down navigation with CSS only.
If I hover the button and the submenu comes out.
But then the body will be higher.
I don't want that the body will be higher.
Here the files:
http://jsfiddle.net/UHQV5/
I think the position: relative; is false.
How about this one?
added this:
nav ul ul{
position: absolute;
margin-left: -10px;
}
and removed some unnecessary ones.
jsFiddle
Nice looking website,
I messed with the code just a little and found the making the tag have a id for the css. Then in the css setting the postion to fixed!
The Code:
From this
<nav>
<ul id="navigation">
<li>Home</li>
<li>Bücher...»
<ul>
<li>für kleine Leser</li>
<li>für große Leser</li>
<li>Schulbücher</li>
</ul></li>
<li>und mehr...»
<ul>
<li>Filme</li>
<li>Ebooks</li>
</ul></li>
<li>Seit 1851»
<ul>
<li>Firmenhistory</li>
</ul></li>
</ul>
</nav>
To This
<nav id="nav">
<ul id="navigation">
<li>Home</li>
<li>Bücher...»
<ul>
<li>für kleine Leser</li>
<li>für große Leser</li>
<li>Schulbücher</li>
</ul></li>
<li>und mehr...»
<ul>
<li>Filme</li>
<li>Ebooks</li>
</ul></li>
<li>Seit 1851»
<ul>
<li>Firmenhistory</li>
</ul></li>
</ul>
</nav>
And then in the css just put in:
#nav {
postion: fixed;
}
List:
<ul>
<li>
Item 1
<ul>
<li>
Item 1-1
<ul>
<li>Item 1-1-1</li>
<li>
Item 1-1-2
<ul>
<li><a href="#">Item 1-1-2-1</li>
</ul>
</li>
</ul>
</li>
<li>Item 1-2</li>
<li>Item 1-2</li>
</ul>
</li>
<li>Item 2</li>
</ul>
Here's some relevant CSS
#nav ul ul {
display: none;
}
#nav ul li:hover > ul {
display: block;
}
The first one will hide every drop down item. The second will match any ul that is a children of the parent #nav ul li:hover, if so display:block and the drop down is visible.
Now because when hovering a item, the items within will simply be listed below, this is not what I am looking to achieve. I want to move the Item 1-1-1 and Item 1-1-2 to be on the right of Item 1-1, the Item 1-1-1 needs to be on the right, Item 1-1-2 will be below it (acting as a drop-down list). I am not sure how I select that element.
Example: http://line25.com/wp-content/uploads/2012/css-menu/demo/index.html
Here's what I got so far:
http://jsfiddle.net/Gq8C2/
I tried with first-child, such as:
#nav ul li:hover > ul li:first-child {
display: block;
}
I also tried using position absolute and relative, It almost gave me the result I wanted, but I wasn't able to grab the first item...
There must be a better way of doing this...
How do I select it? And how do I make a similar behavior to that I've been describing above?
Why don't you just use the css/html of the page you linked to instead of trying to reinvent it?
HTML:
<nav>
<ul>
<li>Home</li>
<li>Tutorials
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Web Design
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
</ul>
</li>
<li>Articles
<ul>
<li>Web Design</li>
<li>User Experience</li>
</ul>
</li>
<li>Inspiration</li>
</ul>
</nav>
CSS
Review this Fiddle http://jsfiddle.net/Gq8C2/10/
I use position:absolute for the sub-sub menu :
#nav ul li ul li ul {
position:absolute;
top:0;
left:100%;
}
In order to upgrade your code you can assign a class for each level of the menu like
<ul class="Third_level">
I have looked though this site and found various answers, but none worked for me or I didn't know what to do exactly. Whenever I hover over the menu, the main content get pushed down & when I add "position:absolute" (I've tried some places^^), the whole menu gets deactivated or disappears enirely.
I have a blogger site and use a template from here: http://www.5202.de/2012/10/avantgardistisches-simple-wei-layout.html --> Download.
Please consider, when posting an answer, that I'm a total newbie in coding,and need very precise info;) I've made the menu with a generator, but I'm quite happy with it apart from that problem.
I really hope you can help and I think other newbies would benefit from an easy to understand/implement answer, too:)
Heres the css:
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}
ul#main-nav {font-family:helvetica,arial,sans-serif;margin:0;padding:0;float:left;width:100%;font-size:0.9em;}
ul#main-nav li {margin:0;padding:0;list- style:none;float:left;margin:0;width:9em;position:relative;}
ul#main-nav li a {text- decoration:none;display:block;padding:0.6em;color:#0e0e0e;background:#cfcfcf;border- left:2px solid #fff;border-right:2px solid #fff;}
ul#main-nav li a:hover, ul#main-nav li a:focus {background:#ece1cf;border- left:2px solid gray;border-right:2px solid gray;}
ul#main-nav li ul {padding:0;margin:0;display:none;}
ul#main-nav li:hover ul {display:block;}
ul#main-nav li ul li {float:none;}
ul#main-nav li ul li a {font-size:0.9em;}]]>
Not sure about the Page list belonging, but anyways.
Now here's the html
<ul id="main-nav">
<li>Home</li>
<li>About
<ul>
<li>Me</li>
<li>This blog </li>
<li>Ressources</li>
<li>Legel stuff </li>
</ul>
</li>
<li>Photography
<ul>
<li>Projects</li>
<li>Equipment </li>
<li>Questions</li>
</ul>
</li>
<li>Scrappy Art
<ul>
<li>Scrapbooking </li>
<li>Art Journals </li>
<li>Mixed-Media </li>
<li>Crops & Co. </li>
</ul>
</li>
<li>DIY </li>
<li>Freebies
<ul>
<li>Free Stuff</li>
<li>Free Tutorials</li>
<li>Terms of Use </li>
</ul>
</li>
<li>Favorites
<ul>
<li>Blogging Friends </li>
<li>More Faves </li>
</ul>
</li>
<li>Features
<ul>
<li>Wonderland </li>
<li>Smashbook</li>
<li>Photo- Tips</li>
<li>Books</li>
<li>Lost Places </li>
</ul>
</li>
<li>Travel
<ul>
<li>La Gomera</li>
<li>London</li>
<li>Wroclaw</li>
</ul>
</li>
<li>Contact </li>
</ul>
How about you call the menu from another file (header) and set the background transparent make sure the body section overlaps the header when the drop down happens.
find ul#main-nav li ul {padding:0;margin:0;display:none;}
and change like this
ul#main-nav li ul {
padding:0;margin:0;
display:none;
position:absolute:/*Added*/
z-index:2;/*Added*/
}
You can change position of your child ul by giving position like top:10px;left:10px; etc
Working Demo Here