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;
}
Related
I am running this simple "test" code to change the background color of the nested list<ul class="dropcontent"> by using :hover on parent <li class="drop">
.drop:hover .dropcontent {
background-color: yellow;
}
<body>
<ul id="nav">
<li>Home</li>
<li class="drop">Services</li>
<ul class="dropcontent">
<li>serv1</li>
<li>serv2</li>
<li>serv3</li>
<li>serv4</li>
<li>serv5</li>
</ul>
<li>Gallery</li>
<li>About</li>
<li>Get in Touch</li>
</ul>
</body>
Please someone explain what's wrong here.
.dropcontent is a sibling of .drop (not a descendant), so the selector .drop:hover .dropcontent will not target it.
To correct this, either move the closing </li> of .drop to after the closing </ul> of .dropcontent:
.drop:hover .dropcontent {
background-color: yellow;
}
<body>
<ul id="nav">
<li>Home</li>
<li class="drop">Services
<ul class="dropcontent">
<li>serv1</li>
<li>serv2</li>
<li>serv3</li>
<li>serv4</li>
<li>serv5</li>
</ul>
</li>
<li>Gallery</li>
<li>About</li>
<li>Get in Touch</li>
</ul>
</body>
Or make use of the adjacent sibling combinator (+) with the selector .drop:hover + .dropcontent:
.drop:hover + .dropcontent {
background-color: yellow;
}
<body>
<ul id="nav">
<li>Home</li>
<li class="drop">Services</li>
<ul class="dropcontent">
<li>serv1</li>
<li>serv2</li>
<li>serv3</li>
<li>serv4</li>
<li>serv5</li>
</ul>
<li>Gallery</li>
<li>About</li>
<li>Get in Touch</li>
</ul>
</body>
Note that the former will apply the hover while the child links are selected, while the latter will only apply the hover when .drop itself is selected.
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>
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 just need five links in a box to each make a bubble of their own pop up with more information.
I have code, which was originally intended for use as a nav bar, and it's actually a great nav bar, but I've stripped it down to just the actual function so I can figure out how to make it work for my purposes before I add it to my real code.
It's in an unordered list format, which I can work with, but only one of the links in the model has a pop-up effect. I need each of my links to have a different bubble, so I need to be able to target a specific id or class, but for some crazy reason, it doesn't work when I do that.
<ul id="menu">
<li>Home</li>
<li>
Categories
<ul>
<li>CSS</li>
<li>Graphic design</li>
<li>Development tools</li>
<li>Web design</li>
</ul>
</li>
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
#menu ul {
margin: 20px 0 0 0;
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 1;
background: #444;
background: linear-gradient(#444, #111);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
border-radius: 3px;
transition: all .2s ease-in-out;
}
#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
It all works perfectly, as long as I keep this code intact the way it is. The problem is that there's no way to identify which element I want to pop-up unless I give each of them a separate id, but when I do that, it stops working.
You should also know that it's important that this all be CSS and HTML, because my knowledge of JavaScript and jQuery is still very small and not even to the working phase yet.
I'm doing this for the website of a client of my dad's so the stakes could definitely be a lot smaller.
This looks like a standard pop-up menu. If you just need sub-menus for each link, you should be able to just add them in like this:
<ul id="menu">
<li>Home</li>
<li>
Categories
<ul>
<li>CSS</li>
<li>Graphic design</li>
<li>Development tools</li>
<li>Web design</li>
</ul>
</li>
<li>
Work
<ul>
<li>Work 1</li>
<li>Work 2</li>
</ul>
</li>
<li>
About
<ul>
<li>About 1</li>
<li>About 2</li>
</ul>
</li>
<li>
Contact
<ul>
<li>Contact 1</li>
<li>Contact 2</li>
</ul>
</li>
</ul>
No other CSS changes should be needed. No special id's should be needed. Let us know if it works.
I am looking to make a two-column navigation bar by using a single <ul> with six <li> items:
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Team</li>
<li>Store</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
Three elements on one side, and three on the other; ordered vertically.
Right now, it's easy to do when making two seperate <ul> elements and putting padding/margins between them: http://jsfiddle.net/Baumr/SJcjN/ — but that's not a great solution.
Could also wrap <span> tags around each set of three <li>'s — but is that the only CSS solution?
Looking for some elegant ideas. Thank you!
<ul>
<li>Home</li>
<li>About</li>
<li>Team</li>
<li>Store</li>
<li>Blog</li>
<li>Contact</li>
</ul>
CSS:
li {
width: 50%;
float: left;
padding: 5px 0;
}
They will order like that:
Home About
Team Store
Blog Contact
If that's not a problem, you have a very simple solution.
EDIT:
li:nth-child(even) {
width: 50%;
float: right;
}
li:nth-child(odd) {
width: 50%;
float: left;
}
This will order them in the correct way. not sure how IE will act, but will work in all other browsers.
or you can follow strictly the UL-LI concept, so your html will look like this an you can have as many column as you need:
<nav>
<ul class="menuitem">
<li class="column">
<ul>
<li>Home</li>
<li>About</li>
<li>Team</li>
</ul>
</li>
<li class="column">
<ul>
<li>Store</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</li>
</ul>
<ul class="menuitem">
<li class="column">
.....
</li>
</ul>
</nav>
Making a correct and well formated html can make your life easier.
I think that using <span>'s might be the most cross-browser friendly solution.
Unless someone has other ideas? Looking for something cross-browser compatible, as sadly IE doesn't support nth-child(N).
This is not as clean (HTML wise) as I wanted, with these random spans, but here is the HTML:
<nav>
<ul>
<span>
<li>Home</li>
<li>About</li>
<li>Team</li>
</span><span>
<li>Store</li>
<li>Blog</li>
<li>Contact</li>
</span>
</ul>
</nav>
(Notice the span inside the ul — big faux pas in my book.)
And the CSS:
nav span {
width: 50%;
float: left;
}
But that's hardly a good solution... any other ideas?