Sorry if this is a silly question but I'm looking to add a dropdown list of items to this navbar. It's in a navbar.php file and here is the code:
<link rel="stylesheet" href="/styles/navbar.css" type="text/css" /> <!-- navbar styles -->
<ul id="nav">
<li>Home</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Here's the navbar.css file:
#nav
{
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #242424;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
position:fixed;
top:0px;
}
#nav li
{
float: left;
}
#nav li a
{
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #7ACC01;
border-right: 1px solid #ccc;
}
#nav li a:hover
{
color: #c00;
background-color: #fff;
}
So my question is, is there a simple way of adding a dropdown list of items to "Item 4" for example, where the dropdown menu will appear on mouseover?
I would like you to learn how we do that, instead of giving you the fish. With a rod, you can always fish by yourself.
Look at what I have done in this fiddle:
http://jsfiddle.net/jLkeH/
It actually comes to this:
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
You have to hide ul you want to toggle and set it back to visible if someone hovers on it.
PS: as you can see, I used HTML5, which is recommended, because it is (more) semantic.
Related
I'm trying to write a simple HTML+CSS menu without any absolute positioning or JS. My problem is regarding submenus, where it either expand the current selected item or displace it:
The HTML is straightforward:
<ul id="menu">
<li>Item 1</li>
<li>Folder 1
<ul>
<li>Item 2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
And so is the CSS:
#menu, #menu ul {
border-style: solid;
border-width: 0px;
border-top-width: 1px;
float: left;
list-style: none;
margin: 0px;
padding: 0px;
width: 180px;
}
#menu li ul {
background-color: cyan;
display: none;
position: relative;
right: -168px;
width: auto;
}
#menu li:hover ul {
display: block;
}
#menu li {
border-style: solid;
border-width: 1px;
border-top-width: 0px;
padding: 10px;
}
#menu li:hover {
background-color: lightgrey;
font-weight: bold;
}
I thought the submenu could only affect the layout after being repositioned, which seems
to not be the case here. I'm a bit at a loss.
Using this type of menu pattern, you should use position:relative on the parent LI of the sub-menu, and position:absolute on the UL child menu. The allows the child element to appear outside of the layout flow, relative to its parent.
It's also good practice to put all non-position styling on the A-tag inside each LI and use display:block. It would be difficult for you to style the text on "Folder 1" without it.
Simple example: http://jsfiddle.net/Diodeus/jejNy/127/
Use position:absolute on the ul and position:relative on the LI:
HTML:
<ul id="menu">
<li>Item 1</li>
<li>Folder 1
<ul>
<li>Item 2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
CSS:
#menu, #menu ul {
border-style: solid;
border-width: 0px;
border-top-width: 1px;
float: left;
list-style: none;
margin: 0px;
padding: 0px;
width: 180px;
}
#menu li ul {
background-color: cyan;
display: none;
position: absolute;
top:-1px;
left: 178px;
}
#menu li:hover ul {
display: block;
}
#menu li {
position:relative;
border-style: solid;
border-width: 1px;
border-top-width: 0px;
padding: 10px;
}
#menu li:hover {
background-color: lightgrey;
font-weight: bold;
}
Check out this CodePen
I am trying to create a drop down menu, however whenever I hover over a parent menu the child menu won't line up with it. I have gone through many examples and I always get the same result.
My CSS code is
#mainNav {
margin-top: 20px;
width: 800px;
margin-left: auto;
margin-right: auto;
padding: 0;
overflow: hidden;
background-color: #BBFFFF;
zoom: 1;
}
#mainNav li {
float: left;
list-style: none;
}
#mainNav li a {
color: #000000;
display: block;
width: 80px;
font-size: 14px;
text-align: center;
text-transform: uppercase;
text-decoration: none;
padding: 7px 0px 7px 0px;
border-right: 1px solid #999;
zoom: 1;
}
#mainNav li ul {
display: none;
}
#mainNav a:hover {
background-color: #66FF66;
}
#mainNav li:hover ul {
display: block;
position: absolute;
}
#mainNav li:hover li {
float: left;
width: 80px;
background-color: #BBFFFF;
margin: 0;
padding: 0;
}
My HTML is
<div>
<ul id="mainNav">
<li>Page One</li>
<li>Page Two</li>
<li>Page Three
<ul>
<li><a href="threePageOne.html" name="threePageOneLink>Sub Page One</a></li>
</ul>
</li>
</ul>
</div>
You could use a negative margin-left to pull it back in line. Add it to:
#mainNav li:hover ul {}
Or you can set padding: 0; on the same element.
Also, you are missing a closing '"' in:
<li><a href="threePageOne.html" name="threePageOneLink>Sub Page One</a></li>
Copy paste and try this. Something from this example will help you.
<html>
<head>
<style type="text/css">
#mainNav{
/* Your mainNav decoration here */
}
#mainNav li{
list-style:none;
display:inline-block;
background-color:#0FF;
padding:10px;
border:1px solid #000;
}
#mainNav ul{
position:absolute;
display:none;
padding:0px;
top:50px;
}
#mainNav li:hover ul{
display:inline-block;
}
</style>
</head>
<body>
<ul id="mainNav">
<li>Page One
<br />
<ul>
<li>Sub Page One</li>
</ul>
</li>
<li>Page Two</li>
<li>Page Three
<br />
<ul>
<li>Sub Page One</li>
</ul>
</li>
</ul>
</body>
</html>
There is a lot of css in there that is not specific enough and some stuff that is just in the wrong place.
I have written out a jsfiddle for you here: A DISTILED VERSION OF YOUR CODE
You have list style on li instead of ul where it belongs. You are also not specific enough about the sub lists and so one. Using > like,
.main-nav > li > a { } will say target the first layer of li only, and in that, the only a in that li etc.
I would give the ul's classes etc. See the fiddle for what I think is the most simple approach. For the other people, please let me know if my fiddle could be more concise.
If you try that in FireFox:
http://jsfiddle.net/rJUKT/2/
it works fine. The dropdown menu shows at the bottom of its parent like that:
But if you try it with IE7, the dropdown menu shows at the right, like that:
Any idea why it does that?
HTML
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<ul id="menu">
<li>
<span>Menu 1</span>
<ul>
<li>Link 1.1</li>
<li>Link 1.2</li>
<li>Link 1.3</li>
<li>Link 1.4</li>
</ul>
</li>
<li>
<span>Menu 2</span>
<ul>
<li>Link 2.1</li>
<li>Link 2.2</li>
<li>Link 2.3</li>
<li>Link 2.4</li>
</ul>
</li>
</ul>
CSS
#menu { width: 100%; float: right; list-style: none; margin-top: 5px; color: #2A4153; }
#menu li {
float: left;
font-size: 17px;
font-weight: bold;
background-color: #e1f1ff;
border: 1px solid #93b5d4;
margin: 0 1px 0 1px;
padding: 4px 0 0 0;
border-bottom: none;
height: 20px;
}
#menu li a, #menu li span { padding: 4px 7px 2px 7px; cursor: pointer; }
#menu li ul {
clear: both;
position:absolute;
display:none;
padding:0;
list-style:none;
width: 150px;
margin: -1px 0 0 -2px;
}
#menu li ul li {
float: left;
width: 150px;
border: 1px solid #93b5d4;
border-top: none;
font-size: 15px;
font-weight: normal;
background-image: url('16x16/eye.png');
background-position: 4px 4px;
background-repeat: no-repeat;
-moz-border-radius: 0;
}
#menu li ul li a, #menu li ul li span { display:block; padding-left: 25px; }
#menu li ul li:hover { background-color: #e5f6e8; border: 1px solid #93d4a2; border-top: none; }
#menu li:hover { background-color: #e5f6e8; border: 1px solid #93d4a2; border-bottom: none; }
JS
$(function() {
$('#menu li').hover(
function () {
//show its submenu
$('ul', this).slideDown(100);
},
function () {
//hide its submenu
$('ul', this).slideUp(100);
}
);
});
Thanks!
You need to set "top" and "left" properties for dropdown UL
You can check it out this. Some css properties updated in this
http://jsfiddle.net/vkVHC/
If that's the only reason you're using jQuery (for the dropdown effect on hover), you may as well do it using CSS instead (and thus save many kBs being loaded by the site). Also, Alexei's answer is correct.
<style>
*{
margin:0;
padding:0;
border:0;
}
#navlist{
display:block;
width: 100%;
float: left;
list-style: none;
background-color: #f2f2f2;
border-bottom: 5px solid #ccc;
border-top: 5px solid #ccc;
}
#navlist li{
float: left;
}
#navlist li a{
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 5px solid #ccc;
}
#navlist li a:hover{
color:#c00;
background-color:#fff;
}
#navlist a#current{
color:#c00;
}
/*SEARCH*/
#navlist li input{
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
background-color: #f2f2f2;
border-right: 5px solid #ccc;
}
#navlist li input:hover{
color: #c00;
background-color:#fff;
}
#navlist li input #searchbar{
}
</style>
</head>
<body>
<div>
<ul id="navlist">
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<form action="search.asp">
<li><input id="searchbar" type="text" name="searchbar" size="15" value="INSERT SEARCH"/></li>
<li><input class="searchbut" type="submit" value="Search"/></li>
</form>
</ul>
</div>
</body>
This is a horizontal navigation bar with a search bar. My question is two-fold. How can I make it that I specify a height such as height:30px; for the horizontal navigation and the top and bottom padding of each link and input field will fit exactly to match the specified container height (auto-size to specified height)?; I tried using padding:100% 10px; under a{ and input{ however that did not work. Secondly what selector do I type to modify the input classes separately (ex. #navlist li input #searchbar{ size:15; } )?
Instead of vertical padding, why not make the links height: 30px; and line-height: 30px;. Then, you don't have to worry about making the padding fit exactly because, if you make the line height equal to the height, the text will always be vertically centered.
Fiddle
Hows that? Not exactly sure what you need. Let me know and I'll update when I get a chance.
Im trying to make a vertical menu that produces a horizontal menubar on hover. So far I have kind of gotten it to work but there is a gap between the first li and the sub li.
For example, i want it to look like this:
x
xxxx
x
Instead, it looks like this:
x
x xxx
x
Here is my html:
<ul id="mainmenu">
<li>Top 1
<ul class="submenu">
<li>sub 11
<li>sub 12</li>
</ul>
</li>
<li>Top 2
<ul class="submenu">
<li>sub 21
<li>sub 22</li>
</ul>
</li>
</ul>
Here is my css:
#mainmenu {
margin: 0;
padding: 0;
list-style-type: none;
}
#mainmenu li {
clear: left;
}
#mainmenu a {
display: block;
overflow: hidden;
float: left;
background-color: white;
border: 1px solid black;
color: black;
font-weight: bold;
text-decoration: none;
width: 10em;
text-align: center;
margin:0;
}
.submenu {
list-style-type: none;
float: left;
display: none;
}
#mainmenu li a:hover {
display: block;
color: white;
background-color: black;
}
#mainmenu li a:hover+.submenu, .submenu:hover{
display: block;
display: inline;
}
.submenu li {
float: left;
clear: none !important;
}
.submenu li a:hover {
color: white;
background-color: black;
}
You need to add this:
.submenu {
margin: 0;
padding: 0
}
You have already done this for ul#mainmenu, but you've forgotten to do it for the ul.submenus.
Also, check your HTML. You're missing a couple of </li>. With a HTML5 doctype, you are allowed to omit them, but it's confusing (for humans) if you do so.
it's a little bit hard to see it in this form, but I have impression that you did not clear padding and margin for "li" element. you did it only for "a" and "ul" (mainmenu)