I'm working on a wordpress site for a client.
I have the navigation working and when they hover over the navigations, they will get a green background. This is true for each link-navigation item.
I also want the selected page have that same background, so the visitor of the site, knows where he currently is.
What I have so far:
Wordpress:
<div id="nav">
<?php wp_nav_menu ( array ('theme_location' => 'header-nav','container' => false)); ?>
</div>
CSS:
#nav {
/*float:right;*/
float:left;
height:6em;
/*width:560px;*/
/*width:612px;*/
width:710px;
/*background:#525252;*/
}
#nav ul {
list-style:none;
}
#nav li a{
width:80px;
text-align:center;
}
#nav li a {
text-decoration:none;
float:left;
padding:3.4em 0.4em 0 0;
position:relative;
right:-1em;
/*left:6em;*/
color:#fff;
height:2.1em;
}
#nav li a:hover{
color:#333;
/*background:#60b5b2;*/
background:#69dc37;
font-weight:bold;
}
#nav li a:active {
color:#fff;
background:#69dc37;
}
I was searching the internet and found a post about menu highlighting. I tried that, but it didn't worked.
I need some advice/help on this to get the active-link (background) working.
Please correct background to background-color in your CSS code:
#nav li a:hover{
color:#333;
/*background:#60b5b2;*/
background-color:#69dc37;
font-weight:bold;
}
#nav li a:active {
color:#fff;
background-color:#69dc37;
}
Related
i want to make it so that when I hover the cursor over a link in the list, a bullet point image shows up to the left of the list text. however, it does not seem to work.
I've also tried the following CSS and it does not work:
ul.navibox a:hover{
list-style-image:url(images/crown-icon.jpg);}
any ideas? thanks
Current CSS:
ul.navibox{
margin:0 0 0 0;
padding:5px 0 0 20px;
list-style-type:none;
font-family:arial,verdana,helvetica,sans-serif;
font-size:14px;
color:#333333;}
ul.navibox li a:link{
color:#ff0;
text-decoration:none;}
ul.navibox li a:visited{
color:#f00;}
ul.navibox li a:hover{
color:#f0f;
list-style-image:url(images/crown-icon.jpg);}
HTML:
<div id="middle_left_box"><span style="padding-left:10px">Categories</span>
<h3>accessories</h3>
<h4>Supplies:</h4>
<ul class="navibox">
<li>Pellets</li>
<li>Gas</li>
<ul>
</div>
Without a Demo being provided it's hard to be sure but I would try this
ul.navibox{
margin:0 0 0 0;
padding:5px 0 0 20px;
list-style-image:none; /* default 'non-image' */
font-family:arial,verdana,helvetica,sans-serif;
font-size:14px;
color:#333333;}
ul.navibox li:hover{
list-style-image:url(images/crown-icon.jpg);}
ul.navibox li a:link{
color:#ff0;
text-decoration:none;}
ul.navibox li a:visited{
color:#f00;}
ul.navibox li a:hover{
color:#f0f;
}
Your previous CSS applied the list image to the anchor link which doesn't have that property available to it. So the hover has to be on the list item itself.
If you want to display a bullet aside <a> , you need to reset display of <a> to list-item.
Then , on hover you may switched bullet image from a transparent one to an arrow or so.
CSS example and DEMO:
ul.navibox li a:link {
color:#ff0;
text-decoration:none;
display:list-item;
list-style-position:inside;
list-style-image:url(http://dummyimage.com/16x16/fff/fff&text=);
}
ul.navibox li a:visited {
color:#f00;
}
ul.navibox li a:hover {
color:#f0f;
list-style-image:url(http://dummyimage.com/16x16/fff/000&text=->);
}
So what i want to happen is for the background of the current link(the link of the page you are currently on) to turn a seperate color and also for the font color to change to white. I also want this same effect to occur on a:hover (for links you are hovering over). I have gotten very close to this effect, however my one issue is that to change the font color of a:hover the mouse needs to be directly over the link and not simply within its container. I understand why this would not work since im giving this property to the link specifically and not the list, but font color changes for the "a" dont work if i put them with #nav li.
The effects i want are similar to those of the NavBar on this page http://www.vitalsmarts.com/
CSS/HTML:
<style>
#nav{
list-style-type:none;
text-align:center;
height:50px;
background-image:url("image/menuBg.png");
}
#nav li {
float:left;
width:155px;
}
#nav li a {
text-decoration:none;
font-size:1.3em;
color:#000000;
}
#nav li:hover {
background-color:#143D17;
color:#FFFFFF;
}
#nav li a:hover {
color:#FFFFFF;
}
#nav li a.currentFont {
color:#FFFFFF;
}
.navPadS {
padding:13px 0px;
}
.navPadL {
padding:13px 12px;
}
.navPadLL {
padding-top:13px;
padding-bottom:13px;
padding-right:20px;
}
.current {
background-color:#143D17;
}
</style>
<body>
<!Header and NavBar>
<div id="navCont">
<ul id="nav" class"tbBord">
<li class="navPadS"><a class="currentFont" href="index.html">home</a></li>
<li class="navPadLL">home</li>
<li class="navPadL">home</li>
<li class="navPadS">home</li>
<li class="navPadS">home</li>
<li class="navPadS">home</li>
</ul>
</div>
</body>
</html>
add this to your css
#nav li a {
text-decoration:none;
font-size:1.3em;
color:#000000;
display:block;
}
Don't style the li's just float them left and put all your style in the a's. I've created this example on JS Bin but the bit that matters is:
#nav li {
margin:0;
padding:0;
float:left;
}
#nav li a {
text-decoration:none;
font-size:1.3em;
color:#000000;
width:155px;
display:block;
padding:10px;
}
#nav li a:hover, #nav li a.currentFont {
background-color:#143D17;
color:#FFFFFF;
}
I have a simple navigation with a sub-menu on one of my main navigation items. When the user hovers over this i would like the sub-menu item to show and when you go onto the sub-menu li items the main menu link to still have the background colour 'hovered' state still active. Thing is i cant even get the sub-menu item to show!
I have tried the usual display:none and when :hovered { display:block}; but it's ignoring it.
What am u missing? Must be something so simple but cannot see in the css styling.
Here is a link to an example of how it is setup: http://jsfiddle.net/ULSsa/
here is the demo link http://jsfiddle.net/ULSsa/6/ with corrected css
*{
padding:0;
margin:0;
}
body {
font:normal 12px/18px Arial, Helvetica, sans-serif;
color:#000;
padding:20px;
background-color:#F2F2F2;
}
ul, li, ol {
list-style-type:none;
}
ul#nav-1 {
width:60%;
height:46px;
border:1px solid red;
}
ul#nav-1 li {
position:relative;
display:inline-block;
*float:left;
margin-top:16px;
margin-left:-4px;
}
ul#nav-1 li a {
padding:22px 13px;
font-size:14px;
}
ul#nav-1 li:hover a,
ul#nav-1 li a:hover {
cursor:pointer;
background-color:#000;
}
ul#nav-1 li ul#sub-menu {
display:none;
position:absolute;
width:200px;
list-style:none;
left:0;
top:19px;
}
ul#nav-1 li:hover ul#sub-menu {
display:block !important;
}
ul#nav-1 ul#sub-menu li {
float: none;
margin: 0;
}
ul#nav-1 ul#sub-menu li a {
border-bottom:1px solid #dbddd4;
background-color:#f2f2f2;
width:200px;
text-align:left;
display: block;
padding:0;
padding-left:18px;
padding-top:13px;
padding-bottom:13px;
float:left;
margin:0;
}
ul#nav-1 ul#sub-menu li:hover a {
background-color:#3a3a3a;
color:#FFF;
}
Pretty easy. The submenu ul#sub-menu is not a child of the anchor element, but of the list element. You must either put the submenu inside the anchor element or check for the hover on the list element as following:
ul#nav-1 li:hover > ul#sub-menu { instead of ul#nav-1 li a:hover > ul#sub-menu {
http://jsfiddle.net/ULSsa/2/
You are using wrong selector here, it should be
ul#nav-1 li a:hover + ul#sub-menu { /* Note the + sign instead of > */
display:block !important;
}
Demo
Explanation: You are using > which will select direct child elements of a which in your case are none, so you need to use + adjacent selector to trigger the adjacent element
Just change your ul#nav-1 li a:hover > ul#sub-menu to ul#nav-1 li:hover > ul#sub-menu because the submenu it is a child of li and not of an anchor (a).
See the example by clicking here.
If you do not know, the CSS > selector means the specifically child of the element.
Updated
To maintain the link state, just do this:
ul#nav-1 li:hover a {
background-color: black;
}
See the example by clicking here.
I'am trying to create a navigation menu with a sub menu, and fiddled with it today.
But i'am stuck at getting the sub menu of the parent menu to align it's links.
my HTML
<!-- navigation menu -->
<div class="MenuContainer">
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>
Projects
<ul class="sub">
<li>Project1</li>
<li>Project2</li>
<li>Project3</li>
</ul>
</li>
</ul>
</div>
my CSS
.MenuContainer {
width:100%;
height:50px;
border:1px solid;
position:relative;
}
ul {
margin:0;
padding:0;
}
/*Main menu*/
li.menu {
height:50px;
float:left;
}
ul.menu li {
list-style:none;
float:left;
height:49px;
text-align:center;
}
ul.menu li a {
display:block;
padding:0 20px;
text-align:center;
font-size:17px;
line-height:49px;
text-decoration:none;
color:#5d5d5d;
}
ul.menu li:hover > a {
color:#fdfdfd;
}
ul.menu li:hover > ul {
display:block;
}
/*sub menu*/
li.sub {
height:40px;
float:left;
}
ul.sub li {
list-style:none;
float:left;
height:39px;
text-align:center;
}
ul.sub li a {
display:block;
padding:0 20px;
text-align:center;
font-size:17px;
line-height:39px;
text-decoration:none;
color:#5d5d5d;
}
If anyone can tell me where i went wrong please do. First time trying to create one from scratch.
Also if anyone know a good HTML5 / CSS3 forum / forums please don't hesitate to post a link. I have tried to find some but all are not serious or no active users.
Also this is my first post at stackoverflow so if i do a beginners mistake here, please just point it out.
Thanks on advance.
Hey i think you want this do the sun class position relative and sub ul give position absolute
.sub{
position:absolute;
}
ul.menu li {
position:relative;
}
Live demo http://jsfiddle.net/HVk4G/
Vertical menu Updated demo http://jsfiddle.net/HVk4G/1/
I hav a simple nav bar that i want to convert into a drop down nav bar, but i am not sure what i have to do to accomplish this. Do i need a certain javascript code or css. thanks
/* navigation menu */
div#navigation {
height:55px;
background:#0C1C29 url('images/nav-bg.png') repeat-x scroll top left;
}
div#innernav {
background:transparent url('images/nav-left.png') no-repeat scroll top left;
height:55px;
}
div#navigation ul {
background:transparent url('images/nav-right.png') no-repeat scroll top right;
list-style:none;
margin:0;
padding:0 10px;
position:relative;
top:0;
height:55px;
display:block;
}
div#navigation ul li {
display:block;
float:left;
}
div#navigation ul li a {
display:block;
float:left;
color:#ffffff;
border-bottom:none;
height:32px;
font-family:"Trebuchet MS", Verdana, Arial;
font-weight:bold;
font-size:1.2em;
padding:14px 20px 9px;
border-right:1px solid #060D14;
border-left:1px solid #244566;
}
div#navigation ul li.navleft a {
border-left:none;
}
div#navigation ul li.navright a {
border-right:none;
}
div#navigation ul li a:hover {
color:#FC8228;
}
<div id="navigation">
<div id="innernav">
<ul>
<!-- top navigation -->
<!-- add class navleft to first item and navright to last item as shown -->
<li class="navleft">home</li>
<li>examples</li>
<li>solutions</li>
<li>our service</li>
<li>support</li>
<li class="navright">contact</li>
</ul>
</div>
</div>
Here is an example that uses the suckerfish methodology:
http://jsfiddle.net/uCdGc/
Here is the magic CSS:
/* Code for dropdown */
#navigation ul li ul {
position: absolute;
left:-999em;
}
#navigation ul li ul li {
float:none;
/* put the rest of your styles here*/
}
#navigation ul li:hover ul, #navigation ul li.sfhover ul {
left:auto;
margin-top:55px;
}
For more on suckerfish, check out this url: http://www.htmldog.com/articles/suckerfish/dropdowns/
What I've done is added a ul element containing subnavigation elements to your "Examples" navigation item. When you hover over, the CSS will position the subnavigation so that it appears where you want it. This should work without any javascript, but if you want to support IE 6, you will need to include the jQuery javascript library and the code in the javascript block in the example.
Right now the subnavigation is styled plainly, but add more styles as you need. I've commented where you should add them.
Good luck.