I'm trying to make a horizontal menu with CSS but i've run into a roadblock. What I'm trying to accomplish is to have the first link bblock and last link block have rounded corners using css3. I've managed to make the menu but I'm unable to achieve the desired affect.
I tried styling those individual list items but the effect doesnt show. I'm attaching my css and html for someone to look at. Any pointers would be appreciated
<ul id="nav">
<li style="-moz-border-radius-topleft: 5px;-moz-border-radius-topright: px;-moz- order-radius-bottomright: px;-moz-border-radius-bottomleft: 5px;-webkit-border-radius: 5px px px 5px; border-radius: 5px px px 5px;">Home</li>
<li>About Us</li>
<li>Services</li>
<li>Events</li>
<li>Gallery</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
#nav {
margin-left: 9px;
padding:0;
margin-top: 30px;
margin-bottom: 10px;
list-style:none;
clear:both ;
}
#nav li {
float:left;
display:block;
width:139px;
position:relative;
z-index:500;
margin:0 0;
border-left: 1px solid #5d564e;
}
#nav li a {
display:block;
padding:8px 5px 0 5px;
font-weight:500;
height:50px;
text-decoration:none;
background: #333;
color: #fff;
text-align:center;
border-left: 1px solid #000;
}
#nav li a:hover {
color:#fff;
background: #3e7e99;
text-decoration:underline;
}
#nav a.selected {color:#f00;}
Here's a jsfiddle using css3 to round the outside corners of the first and last items in the list - if I understand what you're trying to accomplish correctly.
One thing I'd add too is that moving your css from inline with the elements to a <style> section or even better a css file is preferable.
You have to set overflow:hidden; for the ul.
http://jsfiddle.net/KKPmL/1/
#nav{
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
overflow:hidden;
}
This doesn't work if the screen isn't big enough to display the navigation on one line.
Second way:
http://jsfiddle.net/KKPmL/2/
#nav li:first-child a{
border-top-left-radius:10px;
-moz-border-top-left-radius:10px;
-webkit-border-top-left-radius:10px;
border-bottom-left-radius:10px;
-moz-border-bottom-left-radius:10px;
-webkit-border-bottom-left-radius:10px;
}
#nav li:last-child a{
border-top-right-radius:10px;
-moz-border-top-right-radius:10px;
-webkit-border-top-right-radius:10px;
border-bottom-right-radius:10px;
-moz-border-bottom-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
}
px is not a valid value, You need 0px or just 0
Also it's better to use classes first and last (or similar) on li
Look here for an example
http://jsfiddle.net/WYuNR/
Related
i've been designing an menu for my website. i've reached an issue with converting in to html/css. The idea is to have an divider line on each side of the text and on mouse over the navigation lines will disappear and show the hover image. but whatever i do the line is still there on one of the sides.
An image of my navigation menu
nav-lnie.png: is just only the line
hover.png is the whole mouseover image
does anybody have a solution or an explanation how to do this?
css looks like this:
.navigation{
width:370px;
float:left;
position: absolute;
left: 300px;
background:url(../images/nav-lnie.png) repeat-y 0 0;
padding:0 0 0 4px; font-size:14px;
font-family:Arial, Helvetica, sans-serif;
color:#fff; text-shadow:1px 1px 1px #333
}
.navigation ul li{background:url(../images/nav-lnie.png) repeat-y right 0;
margin:0 2px 0 0;
}
.navigation ul li a{
display:block;
float:left;
width:90px;
height:38px;
padding:70px 0 0 0;
text-align:center;
color:#fff;
text-decoration:none;
}
.navigation ul li a:hover{
background:url(../images/hover.png) repeat-x;
}
And html like this:
<div class="navigation">
<ul>
<li>Videos</li>
<li>Top Videos</li>
<li>Upload</li>
<li>FAQ</li>
</ul>
</div>
It's most likely due to the margin code you have here:
.navigation ul li{
background:url(../images/nav-lnie.png) repeat-y right 0;
margin:0 2px 0 0;
}
Since there's a 2px margin on the right of each menu item, the left margin won't get hidden if you mouse over the next element. If the margin isn't really needed, you can remove it and it should work fine, given that there's enough space. If it's necessary, then on the hover command, you can change the spacing on the element:
.navigation ul li a:hover{
background:url(../images/hover.png) repeat-x;
margin-left: -2px;
padding-left: 2px;
}
Of course, it's a rough hack to fix the problem. Spacing can be adjusted on both ends as well.
Hi Im having troubles rounding corners on my navigation bar, when I write -
border-radius: 15px; it round all the corners of the <a> but I want only to round of the <li> so only the margins of the whole toolbar.
Here is a fiddle.
thanks
EDIT
only want home and contact to be rounded
This also works:
ul#list-nav li {
border:2px solid blue;
float:left;
overflow:hidden;
}
li.first{
border-top-left-radius:15px;
border-bottom-left-radius:15px;
}
li.last{
border-top-right-radius:15px;
border-bottom-right-radius:15px;
}
Here is the updated fiddle.
To round the corners of the first and last li elements. Try
:first-child and :last-child selectors
Check out the live Demo: http://jsfiddle.net/HYhBe/33/
Add two new classes; one that rounds the left corners and one that rounds the right corners and apply these to the first and last element respectively.
Fiddle
.round_left {
border-radius: 15px 0 0 15px;
}
.round_right {
border-radius: 0 15px 15px 0;
}
<ul id="list-nav">
<li>HOME</li>
<li>SERVICES</li>
<li>GALLERY</li>
<li>THE WAY WE WORK</li>
<li>CONTACT</li>
</ul>
Link updated - http://jsfiddle.net/HYhBe/24/
ul#list-nav li -> float:left & overflow:hidden;
you can remove display inline. li is a block level element.
ul#list-nav li {
border-radius: 15px;
float:left;
overflow:hidden;
}
-- For updated question --
Remove border-radius property from 'ul#list-nav li a' and add to your CSS file:
ul#list-nav li:first-child a{ border-radius: 15px 0 0 15px;}
ul#list-nav li:last-child a{ border-radius: 0 15px 15px 0;}
I tried to do a dropdown menu, but I have a lot of questions and it seems I am doing all wrong. Some of the major question that are perturbing my dreams are:
Should I use list-style:none; on ULs or LIs (or both)?
Is it better to put background-color and border on As or LIs?
Should the LIs that are inside the absolute floating UL have
float:left; or position:relative;?
The code I am using seems of work, but my biggest fear is that I am writing unnecessary lines or even bad coding.
Please help.
The CSS I am using:
*{
padding:0;
margin:0;
}
#menu{
margin:0 auto;
width:800px;
background:#999;
border:1px solid #777;
}
#menu ul{
list-style:none;
border-right:1px solid #aeaeae;
/*Not sure about this V*/
position:relative;
float:left;
}
#menu li ul{
font-weight:normal;
display:none;
position:absolute;
border:1px solid #777;
width:200px;
/*Not sure about this V*/
float:none;
margin-left:-2px;
}
#menu li{
display:block;
position:relative;
float:left;
background:#999;
border-right:1px solid #777;
border-left:1px solid #aeaeae;
}
#menu li li{
float:none;
background:#eaeaea;
border:0;
border-top:1px solid #666;
}
#menu li:hover{
background:#a6a6a6;
}
#menu li li:hover{
background:#f5f5f5;
}
#menu a{
display:block;
text-decoration:none;
color:#fff;
padding:5px 15px;
}
#menu li ul a{
color:#333;
}
#menu a:hover{
color:#fff;
}
#menu li ul a:hover{
color:red;
}
#menu li li:first-child{
border-top:0;
}
.clear{
clear:both;
font-size:0;
line-height:0;
}
The HTML structure is:
<div id="menu">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products
<li>Drop Down
<ul>
<li>DD Item</li>
<li>Another One</li>
<li>Last DD Item</li>
</ul><div class="clear"></div>
</li>
</ul><div class="clear"></div>
</div>
I am using JQuery to show/hide the menu with:
$('#menu ul li').hover(function(){$('ul',this).slideDown(100);},
function(){$('ul',this).slideUp(100);});
The code I used is strongly modified, but taken from here
Your dreams are probably safe. That is, your CSS looks pretty good overall. You may want to consider using Twitter Bootstrap for some of what you're doing (awesome drop-downs), but you can certainly roll-your-own.
To answer your questions:
Should I use list-style:none; on ULs or LIs (or both)?
Just on ul's.
Is it better to put background-color and border on As or LIs?
Put them on the li elements.
Should the LIs that are inside the absolute floating UL have float:left; or position:relative;?
These accomplish entirely different things. Floating left should be sufficient, but you may want to do both.
You should also refactor your jQuery code, despite the fact that it works:
$("#menu ul li").hover(
function () {
$(this).children("ul").slideDown(100);
},
function () {
$(this).children("ul").slideUp(100);
}
);
Fixed see update at bottom
I'm developing a simple CSS-only dropdown menu but I'm having an issue in which the submenu disappears when the mouse enters a 3-4px tall section just inside the first item on the submenu (the :hover background of the first submenu item changes so the mouse is hovering over the first submenu item prior to it disappearing). If you move the mouse very quickly over it and into the rest of the submenu the submenu functions as desired. This is a problem across all major browsers (FF, Safari, Chrome, IE), but strangely it doesn't ALWAYS do it. Every once in awhile I'll load the page and it works perfectly even when I intentionally put the mouse in the problem location. Relevant code below:
CSS
#Nav{ /* The top level UL */
clear:right;
float:right;
width:auto;
margin-top:7px;
}
#Nav li{
float:left;
position:relative;
line-height:30px;
padding:0;
background:#086A9F url(/Content/images/NavTab_grad.png) repeat-x center top;
font-size:13px;
z-index:999;
margin:0 0 0 1px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border:1px solid transparent;
}
#Nav li ul{ /*Submenu UL */
display:none;
}
#Nav li:hover ul{
display:block;
position:absolute;
left:-1px;
background:#fff;
z-index:1000;
border:1px solid #ccc;
border-top:none;
width:200px;
top:31px;
}
#Nav li ul li{
background:#fff;
float:none;
border-bottom:1px solid #eee;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
#Nav li ul li:hover{
background:#d3e4ef;
}
One LI from the #Nav UL
<li id="NavReports">Reporting
<ul>
<li id="NavReportsCourse">Course Report</li>
<li id="NavReportsPortal">Portal Report</li>
<li id="NavWorkflowsManage">Workflows</li>
</ul>
</li>
Update: There was a plugin I wasn't aware of (working with someoneelse's existing code) that was putting an invisble div over the area that was causing me problems.
Be warned that the :hover pseudo class on elements other than anchors is not supported by, guess who?
Yes, IE, as usual..
Have a look at this article, it's quite old, but it's still good, and it seems to fit your case.. Suckerfish Dropdowns on A List Apart
Hey,
Is there a way to get browsers to ignore line breaks in the source?
<div id="navbar">
<div id="navbar-container">
<ul>
<li>HOME</li>
<li>TUTORIALS</li>
<li>BLOG</li>
<li>FORUMS</li>
<li>LINKS</li>
<li> </li>
</ul>
</div>
</div>
#navbar {
background:#FFF;
width:940px;
margin:auto;
border-radius: 10px 10px;
-webkit-box-shadow: 5px 5px 10px #888;
}
#navbar-container {
margin:auto;
}
#navbar-container ul {
list-style:none;
text-align:center;
display:block;
width:auto;
padding:0;
margin:0;
}
#navbar-container li{
list-style:none;
border-left:3px solid black;
display:inline-block;
font-family:"Arial", sans-serif;
font-size:2em;
padding:0 7px 0 10px;
margin:0;
white-space:nowrap;
}
#navbar-container li:hover{
color:#FFF;
background:#000;
border-left:3px solid black;
display:inline-block;
font-family:"Arial", sans-serif;
font-size:2em;
margin:0;
padding:0 7px 0 10px;
}
It's placing a small space between each LI, I've set it up so then line up horizontally,
i could just remove the line breaks in the source, but id prefer not to.
You can float them (either left or right), or you can comment-out the spaces:
<ul>
<li>...</li><!--
--><li>...</li>
</ul>
Or simply leave the tags open 'til the next line.
<ul>
<li>...</li
><li>...</li
><li>...</li>
</ul>
IE seems to do that as a hold-over from the days when list items did not have closing tags. A common way around that is to put the closing > on the next line, i.e.
<ul>
<li>HOME</li
><li>TUTORIALS</li
><li>BLOG</li
>etc...
All browsers should totally ignore whitespace. Is there a particular browser giving you trouble?
Try:
li { margin: 0; padding: 0 }
I was wondering the same thing and what worked for me was:
li { display: table-cell; }
All breaks are ignored and now my menu buttons are right next to each other.
You can see a live example here on my music site: http://www.yanike.tk
I used a CSS Sprite on my UL LI for my navigation menu (home, media,...).