I created this custom css menu, but when switching tabs, the "Active" tab design remains on the 'Home' link on the menu, rather than the actual page I'm on. Any idea how I an fix this?
HTML :
<ul class="menu">
<li><span>Home</span></li>
<li><span>Testing post</span></li>
</ul>
CSS :
.menu {margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url('http://media.datahc.com/Affiliates/43817/Brands/Image/topmenuimages.png') repeat-x;}
.menu li {padding:0; margin:0; list-style:none; display:inline;}
.menu li a {float:left; padding-left:15px; display:block; color:rgb(255,255,255); text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; background:url('http://media.datahc.com/Affiliates/43817/Brands/Image/topmenuimages.png') 0px -30px no-repeat;}
.menu li a span {line-height:30px; float:left; display:block; padding-right:15px; background:url('http://media.datahc.com/Affiliates/43817/Brands/Image/topmenuimages.png') 100% -30px no-repeat;}
.menu li a:hover {background-position:0px -60px; color:rgb(255,255,255);}
.menu li a:hover span {background-position:100% -60px;}
.menu li a.active,
.menu li a.active:hover {line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; background:url('http://media.datahc.com/Affiliates/43817/Brands/Image/topmenuimages.png') 0px -90px no-repeat; color:rgb(255,255,255);}
.menu li a.active span,
.menu li a.active:hover span {background:url('http://media.datahc.com/Affiliates/43817/Brands/Image/topmenuimages.png') 100% -90px no-repeat;}
HTML:
<div class="menu">
<ul>
<li><a class="menuLink active" href="#">Home</a></li>
<li> <a class="menuLink" href="#">Page1</a></li>
<li><a class="menuLink" href="#">Page2</a></li>
<li><a class="menuLink" href="#">Page3</a></li>
</ul>
</div>
css:
.menu
{
height:64px;
width:100%;
background-repeat:repeat-x;
text-align:center;
}
.menuLink, .menuLink:visited
{
color:#00000;
background-image:url(img/btk.png);
text-decoration:none;
font-size: 20px;
width:70px;
height: 50px;
padding: 10px;
display:block;
margin-left: 10px;
margin-right: 10px;
margin-top: 6px;
}
.menuLink:hover
{
color:#CC7011;
background-color:aqua;
font-size: 26px;
}
.active{
background-color:aqua;
}
ul,li{
display:inline-block;
list-style:none;
line-height:60px;
vertical-align:bottom;
}
jquery:
$('.menuLink').click(function(){
$('a').removeClass('active');
$(this).addClass('active');
});
Live Demo
http://jsfiddle.net/PYW35/
First you have an extraneous semicolon in in the first <li>
You need to move the class="active" to the <li> that you want to be active.
I don't know the exact answer to it but, I would say to find something that gets the url and if it matches the link in the bar then that would get class active, else, none are active.
I thing you need some JavaScript to get it done,
Here is the simple demo.
Hope this helps
Note : getElementsByClassName() not supported by some browsers
Take a look on the following comparison table
Related
I am trying to create a menu as follows. When hover the menu item, it should be animate the height from bottom to top. So I positioned anchor tag absolute and gave bottom 0. When anchor tag is positioned absolute, It does not show menu properly.
css is as follows.
#navigation
{
position:relative;
float:right;
margin-top:55px;
padding-right:45px;
}
#navigation ul
{
text-decoration:none;
list-style:none;
display:inline;
position:relative;
padding:0px;
height:30px;
margin:0px;
}
#navigation ul li
{
position:relative;
float:left;
}
#navigation ul li a
{
position:absolute;
bottom:0px;
padding:10px 5px;
width:79px;
display:block;
text-decoration:none;
background-color:#1c1c1c;
color:rgb(255,255,255);
/*margin:2px;
margin-bottom:0px;*/
text-align:center;
font-family:Tahoma;
/*position:relative;*/
font-size:15px;
}
html is as follows.
<div id="navigation">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Contact Us</li>
</ul>
</div>
http://jsfiddle.net/90up4hz2/
demo - http://jsfiddle.net/victor_007/90up4hz2/1/
the issue is because of position:absolute for the li and position:relative the width becomes 0 try adding fixed with for li
#navigation ul li {
position:relative;
float:left;
height:30px;
width:89px;
}
http://jsfiddle.net/L0r493ag/2/
I created this for you, dont use ul li or just add the follow css to them or to any object
.boxhead
{
color: #afaeae;
text-decoration: none;
font-size: 17px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
background:#000000;
padding-left:10px;
padding-right:10px;
height:50px;
}
.boxhead:hover
{
color: #7d7d7d;
}
and then
<div id="navigation">
<a class="boxhead" href="index.php">Home</a>
<a class="boxhead" href="about-us.php">About Us</a>
<a class="boxhead" href="products.php">Products</a>
<a class="boxhead" href="contact-us.php">Contact Us</a>
</div>
I want to display (blue) sub menu in one line but somehow it is coming in multiple lines. It works fine if I add fixed width but it should be flexible as this menu will by dynamic and could be change as per user's request.
Please check Fiddle
http://jsfiddle.net/awaises/meXB9/
HTML :
<div class="left-bar">
<ul class="menu">
<li>
For Sale
<ul class="sub-menu">
<li>Residential</li>
<li>Commercial</li>
<li>Industrial</li>
<li>Agriculture</li>
<li>Land</li>
</ul>
</li>
<li>Rent To Own</li>
<li>Key Money</li>
<li>For Sale at Auction</li>
</ul>
</div>
CSS :
body{font:normal 12px/24px arial;}
.left-bar{background:#262626; width:150px; text-align:center; text-decoration}
ul.menu, ul.sub-menu, ul.sub-menu2{margin:0; padding:0; list-style:none;}
ul.menu li{ position:relative; }
ul.menu li a{
color:#adadad;
font-weight:bold;
text-decoration:none;
border-bottom:1px solid #171717;
display:block;
}
ul.sub-menu{
position:absolute;
background:#1ea3d7;
top:2px; left:150px;
}
ul.sub-menu li{float:left;}
ul.sub-menu li a{color:#fff;border:none;padding:0 10px;}
Updated Fiddle
make top:0px; in ul.sub-menu
Update:
use display:inline-flex;
Use following.
.sub-menu {
display: table;
}
.sub-menu li {
/* float: left; */
display: table-cell;
}
I have the menu bar below and i would like to change the css class to active of the html code when the pages has been selected. So when the user has selected to view said page i would like to set the active class which is already set
HTML Code
<div id="main-nav">
<ul>
<li class="active">Home</li>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<div class="clear-both"> </div>
</div>
CSS code
#main-nav{
height:29px;
float:left;
background-image:url(../Styles/images/nav-bg.gif);
background-repeat:repeat-x;
background-position:top left;
width:100%;
}
#main-nav ul,
#main-nav li{
padding:0px;
margin:0px;
list-style-type:none;
}
#main-nav ul{
height:29px;
line-height:29px;
background-image:url(../Styles/images/nav-bar.gif);
background-position:right;
background-repeat:no-repeat;
float:left;
padding:0px 1px 0px 0px;
margin:0px 0px 0px 10px;
}
#main-nav li{
height:29px;
line-height:29px;
display:inline;
position:relative;
float:left;
width:80px;
text-align:center;
}
#main-nav li a{
height:29px;
width:80px;
text-align:center;
float:left;
background-image:url(../Styles/images/nav-bar.gif);
background-position:left;
background-repeat:no-repeat;
}
#main-nav li a:link,
#main-nav li a:visited{
color:#FFFFFF;
text-decoration:none;
}
#main-nav li.active a,
#main-nav li a:hover{
background-image:url(../Styles/images/active.gif);
background-repeat:no-repeat;
background-position:left;
}
The key to making list-based menus:
DO NOT STYLE THE LIST (other than display, position and float and clearing margins and padding)
Use display:block and put ALL STYLING on the A-tag (this includes your hover and active states).
Also, choose display:inline-block, or float:left, not both.
I'm trying to make the <li> fit the width of the <ul> but even with width:auto it doesn't work at all, and I don't know why. I tried to use display:inline-block but this is the same. I don't know how many tabs I will have so this is why I am not using a percentage directly.
I would like to display the list inline when I display the page on a desktop and display one li per line when I am on a smartphone (with media queries).
I have this:
<ul id='menu'>
<li class="button"><a class='current' href='http://'>Home</a></li>
<li class="button"><a href='http://'>Products</a></li>
<li class="button"><a href='http://'>Support</a></li>
<li class="button"><a href='http://'>Contact</a></li>
<li class="button"><a href='http://'>Contact</a></li>
</ul>
and my CSS looks like this:
ul#menu
{
margin:0;
padding:0;
list-style-type:none;
width:100%;
position:relative;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
/*border-bottom:1px solid #000000;
border-top:1px solid #000000;*/
}
li.button {
background:transparent url(../images/nav_bg.png) repeat-x top left;
height:30px;
width:auto;
}
ul#menu li
{
display:inline-block;
margin:0;
padding:0;
width:auto;
}
ul#menu li a
{
display:inline-block;
color:#999999;
text-decoration:none;
font-weight:bold;
padding:8px 20px 0 20px;
width:auto;
}
ul#menu li a:hover
{
color:#FFFFFF;
height:22px;
background:transparent url(../images/nav_bg.png) 0px -30px no-repeat;
}
ul#menu li a.current
{
display:inline-block;
height:22px;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;
margin:0;
}
I've found this way to deal with single-line full-width ul where an undefined number of li elements need to be spaced out evenly:
ul {
width: 100%;
display: table;
table-layout: fixed; /* optional */
}
ul li {
display: table-cell;
width: auto;
text-align: center;
}
Basically, it emulates a table. Works in Gecko, Webkit, IE8+.
For IE7 and downwards you should use some inline-block hackery :)
JSFiddle
Since the li count can change, I can only think of accomplishing this with javascript/jquery as you suggested. Just divide 100 by the # of li's and set the width on each one.
var width = Math.floor(100 / $("ul#menu li").size());
$("ul#menu li").css('width', width + "%");
You will probably have to play with the width depending on padding and what not.
As a side note, If you haven't already, I recommend getting a tool like firebug, which will let you edit css and execute js on the fly. It is infinitely useful for fine tuning appearances.
If you want to fill the width of the <ul> with the five <li>s, you will have to give those <li>s a width of 20% each.
Note that you need to change some other details of the CSS if you want to make this work; e.g. with a display:inline-block you make the spaces between the <li> count, so the total width of the <ul> content will be more than 100% wide. I'd suggest removing the display:inline-block and giving them float:left.
Edit: Or do you want them to be distributed proportionally according to their contents? That would be a different challenge.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body{
margin:0 auto;
}
.main{
width:650px;
border:1px solid red;
padding:5px;
}
ul {
padding:0;
margin:0;
width: 100%;
border-bottom: 0;
}
li{
display: table-cell;
width: 1%;
float: none;
border:1px solid green;
margin:2px;
padding:10px;
text-align:center;
}
</style>
</head>
<body>
<div class="main">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
</body>
</html>
#menu {
padding: 0;
margin: 0;
border: 1px solid red;
position: absolute;
}
#menu li {
list-style-type: none;
float: left;
position: relative;
padding-right: 10px;
}
#menu li a {
text-decoration: none;
}
<ul id="menu">
<li>1A1CASĂ </li>
<li>H1TML-CSS </li>
<li>J1VASCRIPT </li>
<li>PHP </li>
<li>TESTE </li>
<li>CONTACT </li>
</ul>
Wow stumbled upon a very old question here.
For anyone also seeing this and scrolling down here, in 2022 this is easily doable via flexbox.
#menu {
display: flex;
gap: 1rem;
}
li {
list-style-type: none;
}
<ul id='menu'>
<li class="button"><a class='current' href='http://'>Home</a></li>
<li class="button"><a href='http://'>Products</a></li>
<li class="button"><a href='http://'>Support</a></li>
<li class="button"><a href='http://'>Contact</a></li>
<li class="button"><a href='http://'>Contact</a></li>
</ul>
try below css:
style.css (line 87)
ul#menu li {
float: left;
margin: 0;
padding: 6px 0;
width: 11.1%;
}
style.css (line 113)
ul#menu li a.current {
background: url("images/nav_bg.png") no-repeat scroll 0 -30px transparent;
height: 22px;
margin: 0;
}
style.css (line 95)
ul#menu li a {
color: #999999;
font-weight: bold;
padding: 8px 20px 0;
text-decoration: none;
width: auto;
}
see screen shot:
how do i make a sub menu dissapear and appear when i hover over a link?
this is my menu:
<div class="sideMenu2">
<ul>
<li><a href>retail</a>
<ul class="subsideMenu2">
<li>cabot circus</li>
<li>st. stephen's</li>
<li>silverburn</li>
<li>braehead</li>
</ul>
</li>
<li><a href>sports & leisure</a>
<ul class="subsideMenu2">
</ul>
</li>
</ul>
</div>
This is my current css:
.sideMenu2 ul li.on a
{
height:2em;
padding-top: 2px;
background:url(../images/point.png) no-repeat;
font-weight:bold;
}
.sideMenu2 ul
{
padding: 15px 0px 0px 0px;
list-style-type:none;
font-size:0.9em;
width:20em;
color:#fff;
margin-left:-10px;
}
.sideMenu2 ul a{
padding: 2px 20px 0px 0px;
color:#fff;
text-decoration:none;
float:left;
width:19.2em;
}
.sideMenu2 li a
{
height:2em;
padding-top: 1px;
padding-left:15px;
}
.sideMenu2 li a:hover{
background:url(../images/point.png) no-repeat;
cursor:pointer;
padding-left:-15px;
}
.subsideMenu2 {
display: none;
}
.sideMenu2 li:hover .subsideMenu2 {
display: block;
}
But won't work in old Internet Explorer, for them the only option is javascript.
see this example script of header menu dropdwon style
http://bit.ly/1abEJ9o