image sample : http://i.stack.imgur.com/SxZ8D.jpg
any one help to build css menu like this picture with hover and active.
especially line on the top of navigation menu with white dot when active and hover.
Try something like this (I only tested on Chrome and Firefox, just to let you know):
nav ul li{
display:inline-block;
font-family:"Helvetica Neue", Arial, sans-serif;
}
nav ul li a{
padding:8px 10px 0 0;
text-decoration:none;
color:#F86659;
border-top:6px #7F170E solid;
font-size:.9em;
margin:0;
}
nav ul li.selected a{
color:#FFF;
}
.circle {
background: #7F170E;
width: 15px;
height: 15px;
border-radius: 50%;
position:relative;
left:-2px;
top:-2px;
margin:0 auto;
}
nav ul li.selected .circle{
background: #FFF;
border:4px #7F170E solid;
}
An example JSFiddle: http://jsfiddle.net/7P8qv/
Related
I am having problems with my navigation bar. I want it to show a different color after the link has been visited. I read an answer from code academy, Stack O/F and other sites saying that "The pseudo-class_selector must follow the following order for it to work.
:link
:visited
:hover" (codeacademy-Submitted by Samrudhi Sharma). I tried this, but nothing happened. I've really gotten myself confused now. Thanks for your help.
My code:
#nav {
width:100%;
float: left;
margin: 20px;
padding: 0;
border-top: 5.5px solid red;
border-bottom: 5.5px solid red;
line-height: 1.8em;
display:inline-block;
clear:both;
}
#nav ul {
float: left;
margin: auto;
width: 1024px;
margin:0px;
list-style: none;
}
#nav ul li {
color: orange;
font-size:1.5em;
float: left;
width: 150px;
padding: 0px;
margin:0px;
list-style:none;
}
#nav ul li a {
border-left:1px solid #fff;
text-align:center;
display: block;
width: auto;
height: 25px;
text-decoration: none;
}
#nav ul li:visited a{
background:yellow;
color:#FFFFFF;
text-decoration:none;
}
#nav ul li:hover a{
background:#C60;
color:#FFFFFF;
text-decoration:none;
}
Place a:visited on the <a>.
Have a fiddle - Fiddle link! (Click "Run" in the jsfiddle header if the yellow does not render.)
CSS
#nav li a:visited {
background:yellow;
color:#F00;
text-decoration:none;
}
you should use the pseudo-classes on your anchor, not on the list element. So a:visited instead of li:visited, because you visit the anchor's link, not the list element's ;)
I'm a bit new to css. I'm trying to make a horizontal navigation bar with only 3 text items for mobile device viewing. I have width set to 100% and each section width set to 32% (I tried 33% but it would place the 3rd item on a new line.) It looks ok as it is, but when I hover (or click on using a mobile device) the background color changes and you can see the margins.
ul.nav {
width:100%;
margin:0 auto;
padding:0;
list-style:none;
display:inline-block;
background-color:#62564A;
text-align:center;
font-family: sans-serif;
}
.nav li {
display:inline;
}
.nav a {
width:33%;
text-align:center;
display:inline-block;
padding-bottom:13px;
padding-top:12px;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
}
.nav a:hover {
background:#A26A42;
border:none;
width:32%
}
ul.nav li:first-child a{
border:none;
}
ul.nav li:last-child a {
border:none;
}
End of CSS
<ul class="nav">
<li>Search</li>
<li>Legend</li>
<li>Info</li>
</ul>
<div id="map_canvas" style="position:absolute;left:0;right:0;"></div>
Thank you for any help.
I'd rework your CSS like this jsFiddle example.
CSS
ul.nav {
width:100%;
margin:0 auto;
padding:0;
list-style:none;
background-color:#62564A;
text-align:center;
font-family: sans-serif;
}
.nav li {
display:inline-block;
width:33%;
margin:0;
padding:0;
}
.nav a {
text-align:center;
padding:12px 0 13px 0;
margin:0;
border-left: 1px solid #fff;
border-right: 1px solid #fff;
display:block;
}
.nav a:hover {
background:#A26A42;
border:none;
}
ul.nav li:first-child a{
border:none;
}
ul.nav li:last-child a {
border:none;
}
Try this:
* { margin:0; padding:0; } // This reset should go at the top of your CSS (if you don't have one already)
.nav li {
display:block;
float:left;
width: 33%;
}
.nav li a {
display:block;
text-align: center;
}
Fiddle: http://jsfiddle.net/kboucher/duaa6/
On "hover" you make the menu items narrower than normal. Plus you remove ther border which will narrow it even more. Also, It looks like you are using a 1px border left and right for spacing. If this is the case use margin instead. Use jsfiddle to practice.
Try this:
ul.nav {
width:100%;
margin:0;
padding:0;
list-style:none;
text-align:center;
font-family: sans-serif;
}
.nav li {
display:inline;
}
.nav a {
width:32%;
text-align:center;
display:inline-block;
padding-bottom:13px;
padding-top:12px;
margin-left: 1px;
background: #62564A;
}
.nav a:hover {
background:#A26A42;
}
ul.nav li:first-child a{
margin-left: 0;
}
http://jsfiddle.net/mVv75/4/
below is the css script for menu of this site
#navmenu{
z-index:99999;
margin-top:40px;
margin-left:400px;
position:absolute;
}
#navMenu li {
float:left;
color:#ececec;
list-style-type:none;
}
#navMenu ul {
margin-left:300px;
margin-top:70px;
font-size:16px;
color:#000000;
}
#navMenu li a{
width:70px;
height:15px;
display: inline-block;
font-weight:700;
float:left;
color:#707070;
display: block;
padding: 8px 12px;
text-decoration: none;display: block;
padding: 8px 12px;
text-decoration: none;
background-image: url(img/image_menubutton.JPG);
border-right:1px solid white;
margin-right:12px;
font-family:"Georgia",Georgia,Serif;
font-weight:900;
font-size:19px;
text-align: center;
}
#navmenu li.item1{background-image: url(img/about.JPG);}
the menu is displayed perfectly in chrome and FF .But in IE its not proper..
what is the solution to get it displayed properly in IE??
Edit1
This is how the menu looks in IE8
This is how menu looks in FF
Check your doctype to make sure IE is understanding inline-block
IE8 display inline-block not working
I´m trying to figure out why the background image on my a:selected class is being cut both bottom and top. I´ve tried assigning height:!important; and min-height; to .main_menu ul li and .main_menu ul li a.selected, but seems like something else is limiting the background image size (17x21px)
I wanted to provide an image, but since I´m new they won´t let me do so :(
The image is a circle and it´s being sliced bottom and top, just as it was to fit into a smaller container
Here´s the code, thanks for any suggestion!
.menu_container{
position: absolute;
float: left;
width: 270px;
margin-top: 220px;
}
.main_menu ul {
padding: 0px;
margin:0px;
list-style-type: none;
}
.main_menu ul li {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
letter-spacing:4px;
text-align:right;
line-height:35px;
list-style-type:none;
}
.main_menu ul li a {
padding-right: 25px;
text-decoration:none;
color:#999;
}
.main_menu ul li a.selected {
color: #bc4c9b;
font-weight:bold;
background: url(images/circle.gif) right center no-repeat;
height: 35px!important;
}
.main_menu ul li:hover {
text-decoration:none;
color:#999;
font-weight:bold;
background:url(images/circle_grey.gif) right center no-repeat;
}
try and rewrite the following rule:
.main_menu ul li a {
padding-right: 25px;
text-decoration:none;
color:#999;
display:block;
}
Hey i think you can give to
anchor tag display: inline-block; or give to line-height
as like this
.main_menu ul li a{
display:inline-block;
line-height:35px;
}
Your background is attached to a anchor tag (.main_menu ul li a) and is therefor sized after font-size. To see the whole background file, you need to make anchor element to block or you can use padding.
Use:
display: inline-block;
or
display: block;
or use padding for .main_menu ul li a
You just need to define display:inline-block; in your li a see your updated css :-
.menu_container{
position: absolute;
float: left;
width: 270px;
margin-top: 220px;
}
.main_menu ul {
padding: 0px;
margin:0px;
list-style-type: none;
}
.main_menu ul li {
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
letter-spacing:4px;
text-align:right;
line-height:35px;
list-style-type:none;
}
.main_menu ul li a {
padding-right: 25px;
text-decoration:none;
font-weight:bold;
color:#999;
display:inline-block;
}
.main_menu ul li a.selected {
color: #bc4c9b;
font-weight:bold;
background: url(http://i.imgur.com/TXNfW.gif) right center no-repeat;
}
.main_menu ul li a:hover {
text-decoration:none;
color: #595959;
font-weight:bold;
background:url(http://i.imgur.com/5Ic6o.gif) right center no-repeat;
}
see the demo:- http://jsbin.com/agavid/13/edit
if you open the following link
http://dev.scopedesign.com/client/nyfarmersmarket_02/
you find an navigation bar if you go on "ABOUT US" you will see a drop down..
then you se the problem in drop down
now i want to give you a little idea from how i make this..
I am working on joomla CMS, & i do some changes in navigation module to get my style now the follwing CSS i used for this.. the problem is it is displaying the .parent.active a
background in drop downs i dont want that for this purpose i made .parent.active a ul
but it doesnt work..
you can check this how it works by inspect element in the browser.
.parent.active a{
background-image:url(../images/selected.png);
background-repeat:repeat-x;
padding-top:13px;
padding-bottom:13px;
}
.parent.active a ul{
background-image:none !important;
background-repeat:none;
padding-top:0px !important;
padding-bottom:0px !important;!
}
.menusan
{
/* Use these parameters to positions your menu. */
position: absolute;
// left: 10px;
}
.menusan, .menusan li, .menusan li ul { /* all lists */
padding: 0;
margin: 0;
// list-style: none;
display:block;
float:left;
}
.menusan li a{
padding-left:20px;
padding-right:18px;
}
.menusan li a:hover{
background-image:url(../images/selected.png);
background-repeat:repeat-x;
padding-top:13px;
padding-bottom:13px;
}
.menusan li{ /* all list items */
padding-top:11px;
padding-bottom:11px;
// padding-left:20px;
// padding-right:18px;
-moz-border-right:#537d28 groove 2px;
border-right:#7cb43f groove 2px;
[border-right:#537d28 groove 2px;
border-right:#7cb43f groove 2px;/
border-right:#7cb43f groove 2px;]
}
.menusan li ul { /* second-level lists */
//top:35px;
margin-top:13px;
float:left;
position: absolute;
border: none;
left: -98%; /* Use left instead of display to hide menus; display: none isn’t read by screen readers. */
}
.menusan li ul li{
display:list-item;
float:none;
border: none;
background-color:#537d28;
color:#fff;
//padding:10px 10px 24px 10px;
}
.menusan li ul li:hover{
display:list-item;
float:none;
background-color:#96c73d;
}
.menusan li ul li a{
display:block;
float:left;
}
.menusan li ul li a:hover{
display:block;
float:left;
background-color:#96c73d;
}
.menusan li:hover ul, .menusan li.sfhover ul { /* lists nested under hovered list items */
left: auto; /* change is to 10px, 20px, etc for indenting the sub menu */
border: none;
display:block;
float:left;
}
/* **************** Dropdown Menu styling end here ***************/
One thing i specialy want to let you know guys that it is difficult to make div in it or cheange style name because it is a dynamic module.
Cleaned up and fixed your CSS, try this:
.navigation {
background-color:#537D28;
color:#fff;
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
height:40px;
margin-bottom:0.6em;
width:100%;
}
.menusan {
margin: 0;
list-style-type: none;
font-weight:700;
float: left;
color:#fff;
}
.menusan > li {
margin:0;
float: left;
border-right:1px groove #7cb43f;
position:relative;
}
.menusan li a {
display:block;
height:40px;
line-height:40px;
padding:0 25px;
text-decoration:none;
color:#fff;
}
.menusan .active {
background: url("http://dev.scopedesign.com/client/nyfarmersmarket_02/templates/nyfm/images/selected.png") repeat-x center center;
}
.menusan li a:hover {
background: url("http://dev.scopedesign.com/client/nyfarmersmarket_02/templates/nyfm/images/selected.png") repeat-x center center;
}
.menusan li.parent ul {
position:absolute;
z-index:9999;
top:40px;
left:0;
display:none;
background-color:#537D28;
}
.menusan li.parent:hover ul {
display:block;
}
.menusan li.parent ul a {
float:left;
}
.menusan li.parent ul a:hover {
background-color:#70A835;
}
.menusan li.parent ul a {
width:55px;
}