|
CSS - Setting Current Menu State
I'm trying to use Eric Meyer's css tabbed navbar to navigate a form. It works, except that I can't seem to get the navbar to indicate the current tab by changing the tab background and bottom border to white. I've been reading and trying different css commands, but haven't been successful.
I'm including my html and css below and would appreciate any help. Thanks, Keith Silva CSS: textarea{ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 1.0em; } button{ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 1.0em; } /*table{ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 0.8em; }*/ caption{ font-size: 1.5em; } .add{ font-size: 0.6em; text-align: right; } .frm_tbl{ border-spacing: 5px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 0.8em; color: Navy; } #navlist { padding: 3px 0; margin-left: 0; border-bottom: 1px solid #778; font: bold 12px Verdana, sans-serif; } #navlist li { list-style: none; margin: 0; display: inline; } #navlist li a { padding: 3px 0.5em; margin-left: 3px; border: 1px solid #778; border-bottom: none; background: #DDE; text-decoration: none; } #navlist li a:link { color: #448; } #navlist li a:visited { color: #667; } #navlist li a:hover { color: #000; background: #AAE; border-color: #227; } /*#navlist li:target*/ #mail_frm #mail_nav a, #loc_frm #loc_nav a, #other_frm #other_nav a{ background: white; border-bottom: 1px solid white; } #mail_frm{display: none} #mail_frm:target{display: block} #loc_frm{display: none} #loc_frm:target{display: block} #other_frm{display: none} #other_frm:target{display: block} HTML: // #include settings #cgivar id #cgitextvar notes #cgitextvar directions #if @id != "" //edit existing record #sql load select * from tbl_org where org_id = @id #else //new record #sqlblankrow tbl_org #endif <form method="POST" target="_self" name="org_form"> #formtarget org_save <div id="navcontainer"> <ul id="navlist"> <li id="mail_nav"><a href="#mail_frm">Mail</a></li> <li id="loc_nav"><a href="#loc_frm">Location</a></li> <li id="other_nav"><a href="#other_frm">Other</a></li> </ul> </div> <table id="mail_frm" class="frm_tbl" border="0"> <tr> <td colspan="2">Office<br><input name="office" type="text" size="45" maxlength="45" value="@office" title=""></td> <td>Type<br><select name="type" size="1" class=""> #optionlist selected=@type #options muni Municipality state State discharger Discharger consultant Consultant law_firm Law Firm dischgr_assoc Discharger Assoc elected Elected Official lab Laboratory public Public academia Academia tribe Tribe other Other </select></td> </tr> <tr> <td colspan="2">Division<br><input name="division" type="text" size="45" maxlength="45" value="@division" title=""></td> <td>Region<br><select name="region" size="1" class=""> #optionlist selected=@region #options none None north AZ-North central AZ-Central south AZ-South rb1 CA-North Coast(1) rb2 CA-San Francisco Bay(2) rb3 CA-Central Coast(3) rb4 CA-Los Angeles(4) rb5r CA-Central Valley North(5r) rb5s CA-Central Valley(5s) rb5f CA-Central Valley South(5f) rb6 CA-Lahontan(6) rb7 CA-Palm Desert(7) rb8 CA-Santa Ana(8) rb9 CA-San Diego(9) </select></td> </tr> <tr> <td colspan="2">Department<br><input name="dept" type="text" size="45" maxlength="45" value="@dept" title=""></td> <td>Mail Code<br><input name="mail_code" type="text" size="15" maxlength="15" value="@mail_code" title=""></td> </tr> <tr><td colspan="2">Organization<br><input name="org" type="text" size="45" maxlength="45" value="@org" title=""></td></tr> <tr><td colspan="2">Mailing Address<br><input name="mail_addr" type="text" size="45" maxlength="45" value="@mail_addr" title=""></td></tr> <tr> <td>Mailing City<br><input name="mail_city" type="text" size="20" maxlength="20" value="@mail_city" title=""></td> <td>State<br><input name="state" type="text" size="20" maxlength="20" value="@state" title=""></td> <td>Mailing Zip Code<br><input name="mail_zip" type="text" size="10" maxlength="10" value="@mail_zip" title=""></td> </tr> </table> <table id="loc_frm" class="frm_tbl" border="0"> <tr><td colspan="2">Location<br><input name="location" type="text" size="45" maxlength="45" value="@location" title=""></td></tr> <tr><td colspan="2">Location Address<br><input name="loc_addr" type="text" size="45" maxlength="45" value="@loc_addr" title=""></td></tr> <tr> <td>Location City<br><input name="loc_city" type="text" size="20" maxlength="20" value="@loc_city" title=""></td> <td>Location Zip<br><input name="loc_zip" type="text" size="10" maxlength="10" value="@loc_zip" title=""></td> </tr> <tr><td colspan="2">Directions<br><textarea name="directions" rows="7" cols="60"> #showtext ./directions/org_@org_id #+ </textarea></td> </tr> </table> <table id="other_frm" class="frm_tbl" border="0"> <tr><td colspan="2">Main Office<br><input name="main" type="text" size="45" maxlength="45" value="@main" title=""></td></tr> <tr><td colspan="2">Main Address<br><input name="main_addr" type="text" size="45" maxlength="45" value="@main_addr" title=""></td></tr> <tr> <td>Main City<br><input name="main_city" type="text" size="20" maxlength="20" value="@main_city" title=""></td> <td>Main Zip<br><input name="main_zip" type="text" size="10" maxlength="10" value="@main_zip" title=""></td> </tr> <tr><td colspan="2">Web Site<br><input name="web_site" type="text" size="45" maxlength="45" value="@web_site" title=""></td></tr> <tr><td colspan="2">Notes<br><textarea name="notes" rows="7" cols="50"> #showtext ./notes/org_@org_id #+ </textarea></td> <td><input name="selected" type="checkbox" value="y" title="">Select<br><br> <input name="archive" type="checkbox" value="y" title="">Archive</td> </tr> </table><br> org_id <input name="org_id" type="text" size="8" value="@org_id" title=""> <button name="save" class="save_org" onclick="save_form(this.form);return false;">Save</button> <button name="cancel" class="cancel_org" onclick="cancel_form(this.form);return false;">Cancel</button> </form> Similar TutorialsHi, I have implemented an Apple Style CSS menu however I cannot apply the active state on this. When the current page is displayed, I would like to the button to be highlighted (as if hovering) Can anyone help me please? HTML Code:
<ul id="nav">
<li id="list1"><a href="#"><span>Home</span></a></li>
<li id="list2"><a href="#"><span>Special Offer</span></a></li>
<li id="list3"><a href="#"><span>Help</span></a></li>
<li id="list4"><a href="#"><span>Delivery Information</span></a></li>
<li id="list5"><a href="#"><span>Technical</span></a></li>
<li id="list6"><a href="#"><span>About Us</span></a></li>
<li id="list7"><a href="#"><span>Contact</span></a></li>
</ul>
CSS Code:
* { margin: 0px; padding: 0px; }
#nav {
background: url(nav.png);
height: 38px;
width: 960px;
margin: 0 auto;
}
#nav span {
display: none;
}
#nav li {
list-style-type: none;
float: left;
}
#nav a {
height: 38px;
display: block;
}
#list1 { width: 114px; }
#list2 { width: 164px; }
#list3 { width: 112px; }
#list4 { width: 206px; }
#list5 { width: 130px; }
#list6 { width: 122px; }
#list7 { width: 112px; }
#list1 a:hover {
background: url(nav.png) 0px -38px no-repeat;
}
#list2 a:hover {
background: url(nav.png) -114px -38px no-repeat;
}
#list3 a:hover {
background: url(nav.png) -278px -38px no-repeat;
}
#list4 a:hover {
background: url(nav.png) -390px -38px no-repeat;
}
#list5 a:hover {
background: url(nav.png) -596px -38px no-repeat;
}
#list6 a:hover {
background: url(nav.png) -726px -38px no-repeat;
}
#list7 a:hover {
background: url(nav.png) -848px -38px no-repeat;
}
Hi there, im trying to make a website for a friend and im having a little diffuculty with my drop down menu the site is here bbk.ac.uk/~fsando01/watma/index.html when you hover over the link entitled services in the global nav bar and proceed to hover down to the first submenu link which is abs repair, youll notice the background image i set as hover state for the services link disapears, i want it to stay there like they have got on marks and spencers website... Please if anyone could help id be very grateful... ive tried everthing i can think of I have a css list menu which uses background images in place of bullets. What I'd like is for the user to visit the 'about' page and have the 'about' links background image be different from the rest. So the user can see from looking at the menu, what page they are on. Anyone able to suggest any methods of doing this? Would be appreciated =D I have a menu at the bottom of my page and want the menu item to be highlighted when the visitor is on that particular page so they know where they are. I want to embed this on a couple of pages because I have built a top level menu with drop downs using p7's Pop Menu Magic. Those menu items are highlighted when one is on a certain page. I don't know if I can do this by embedding. Could someone help me please. To see the example go to: www.coloradofoxden.com/deckscapes/index.html. The links at the bottom are what I am trying to fix. Thanks. Hi, Is there any way to change the color of the menu text for that current page? For example when I'm on the 'About Us' page on my website, I want the text to be blue or #00175d to be precise. I am not very good at coding or editing HTML/CSS, so I don't know how to do this. All I know is that my website has a class on the body, and each menu item has a unique ID. My website is: http://firstcareambulance .org/ Any help is appreciated. Thanks I'm a CSS newbie, so forgive me if I'm going about this the wrong way entirely. I'm trying to build a website with a menu that changes the source of an iFrame. So I have: Code: <html> <body> <div>**MENU**</div> <div><iframe id="contentFrame" src="home.htm"></iframe></div> </body> </html> Clicking a menu item, say "Contact Us", changes the src of the iFrame using: Code: <a href="javascript:document.getElementById('contentFrame').src='ContactUs.htm'">Contact Us</a>
The menu is pure CSS, with each item underlining as it's rolled over, and some submenus that show up when hovering. What I'm looking to do is have the selected menu item have a different text color. So when you click "Contact Us", that item will change color and stay that other color while navigating the ContactUs.htm page in the iFrame. Is that even remotely do-able? I saw some examples where you use body classes and id's to match the id of the menu item to the body class of the related page. However, I think that would require loading completely separate pages (with the same menu, header, and footer code). I want to avoid the entire page flickering when changing content. I don't seem to be able to access the body class value of the page being loaded in the iFrame. Is that possible to do? Thanks for any guidance you all could offer. I'm not sure if we are allowed to post urls here or not, didn't see anything against it but I'm sure someone will inform me if we can or can't. Anyways I'm having problems getting the "current" class to work for the active page. I want the current page to use the rollover id. This is a code snippet that should be enough to figure out how I am doing my navigation. I am using a single image and shifting it depending on the state it's in. CSS Code: Original - CSS Code .nav1 {float:left; position:relative;display:block;} .nav1 li {margin:0px; padding:0px; display:inline;} .nav1 li a {height:30px; float:left; list-style:none;} a span { position: absolute; left: -999em; }/*This hides span text for when CSS is supported*/ #home a{ float:left; background-image: url(images/nav_main_1.png); display: block; height: 30px; width: 132px; text-decoration: none; background-position: 0px -31px; } } #home a:hover, a.current{ background-image: url(images/nav_main_1.png); background-position: 0px 0px; } #news a{ float:left; background-image: url(images/nav_main_2.png); display: block; height: 30px; width: 131px; text-decoration: none; background-position: 0px -31px; } #news a:hover, a.current { background-image: url(images/nav_main_2.png); background-position: 0px 0px; }
.nav1 {float:left; position:relative;display:block;}
html4strict Code: Original - html4strict Code <ul class="nav1"> <li id="home" class="current"><a href="#"><span>Home</span></a></li> <li id="news"><a href="#"><span>News</span></a></li> </ul> <ul class="nav1"> Any help is greatly appreciated, I would imagine I am missing something simple. hi all, Code: <ul class="sessionlist"> <li class="session_event"> <label class="evinfo"> <b>available places: 1</b> </label> <br> <label class="evinfo"> <b>session capacity: 1</b> </label> </div> <br> <label class="evinfo">Click to select</label> </li> <li class="session_event current"> <label class="evinfo"> <b>available places: 1</b> </label> <br> <label class="evinfo"> <b>session capacity: 1</b> </label> </div> <br> <label class="evinfo">Click to select</label> </li> I have managed to get the color of the text in these labels by using: Code: ul.sessionlist li:hover .evinfo{
color: #662d91 !important;
}
My question is.. how do i change the color of the text for the labels in selected_session current? Its doing my head in and I can't figure it out... Probably really simple for you guru's though. Ben ps, i know the html for this is invalid.. I've chopped out a load of code to leave only the relevant stuff and have probably missed a few things. I have an element with a :hover css property. The element is also wired with some javascript so that it moves when you click it (for reordering a list). In IE 7 & 8, the hover state persists after the element has been moved and the mouse is no longer over it. The only way to take the element out of hover state is to mouse over it again and then mouse out. It makes my interface look really buggy. Has anyone ever dealt with this bug before? Is it possible to have a link where the user rolls their mouse over it, and an image appears on top of it? I tried setting it as a background image, but it only fills the background of the text. Thanks! Hello I am having a little bit of trouble with an active state on my navigation. The navigation has been created with a sprite image for normal and hover states. I am now trying to make my active state the same as my hover state. I have been trying to add multiple classes to the li element since the nav background image is a class. Honestly I can't believe I haven't figured it out yet, but I'm sure this is a resolution I will not soon forget once I know the answer. I've posted my code and links to the site and code below. Many thanks in advance! Website: http://174.120.172.92/~techsol/ CSS File: http://174.120.172.92/~techsol/styl...ediatype=screen My navigation code: Code:
<!-- nav start -->
<ul id="nav">
<li class="excursions active"><a href="index.php?page=excursions">EXCURSIONS</a></li>
<li class="live"><a href="index.php?page=live-entertainment">LIVE ENTERTAINMENT</a></li>
<li class="restaurants"><a href="index.php?page=restaurants">RESTAURANTS</a></li>
<li class="top"><a href="index.php?page=top-ten">TOP 10</a></li>
<li class="hostoric"><a href="index.php?page=cannery">HISTORIC CANNERY</a></li>
<li class="shopping"><a href="index.php?page=shopping">SHOPPING</a></li>
<li class="days"><a href="index.php?page=juneau-days">JUNEAU DAYS</a></li>
<li class="access"><a href="index.php?page=local-access">LOCAL ACCESS</a></li>
</ul>
<!-- nav end -->
My navigation CSS Styles: Code: #nav{
width:542px;
position:absolute;
top:134px;
left:320px;
margin:0;
padding:0;
list-style:none;
overflow:hidden;
}
#nav li{
float:left;
margin:0 0 5px;
height:40px;
overflow:hidden;
}
#nav a{
background:url(uploads/template/bg-nav.jpg) no-repeat;
text-indent:-9999px;
display:block;
overflow:hidden;
height:40px;
}
#nav .excursions a{
width:122px;
margin:0 8px 0 0;
}
#nav .live a{
width:197px;
background-position:-130px 0;
margin:0 3px 0 0;
}
#nav .restaurants a{
width:130px;
margin:0 5px 0 0;
background-position:-330px 0;
}
#nav .top a{
width:77px;
background-position:-465px 0;
}
#nav .hostoric a{
width:173px;
background-position:0 -45px;
margin:0 9px 0 0;
}
#nav .shopping a{
width:110px;
background-position:-182px -45px;
}
#nav .shopping{margin:0 8px 0 0;}
#nav .days{margin:0 12px 0 0;}
#nav .days a{
width:103px;
background-position:-300px -45px;
}
#nav .access a{
width:126px;
background-position:-415px -45px;
}
#nav .excursions a:hover {background-position:0 -88px;}
#nav li.excursions li.active {background-position:0 -88px !important;}
#nav .live a:hover{background-position:-130px -88px;}
#nav .restaurants a:hover{background-position:-330px -88px;}
#nav .top a:hover{background-position:-465px -88px;}
#nav .hostoric a:hover{background-position:0 -133px;}
#nav .shopping a:hover{background-position:-182px -133px;}
#nav .days a:hover{background-position:-300px -133px;}
#nav .access a:hover{background-position:-415px -133px;}
Hi all, I've had this issue for a while now and can't for the life of me get a clean fix/understanding of whats wrong. I've had a few other Designers/Developers look at it with no look either! http://www.hoctordesign.com/csstest/test.html has the code and details. I'm mainly concerned with issue 1. This is that i can't get control of the hover state text color. It currently inherits a color which is need in other areas of the site. I need to over ride this but can't! The second issue is that I can't control the space between the tabs. Can anyone help? Thanks! Denis I've having an issue with Firefox and my navbar. It's image based I can't find a way to exclude it from the hover state of a:hover { border-bottom:1px dashed #666;} When you hover over the links on the navbar, it shifts the page a bit and then back to normal when you leave the hover state. http://www.graphics-tech.com/concept There is the link for example. Thanks Hi everyone, I'm looking for a solution that I thought (hoped) would be simple. ...but of course is not. I use sprites for rollover effects so the hover attribute just changes the background image position. Everything works cool with the rollovers. What I would like to do, is make a text link that when rolled over will change a separate background image to it's hover state. I should add, that the the rollover image has it's own div and is separate from where the text link is located. To get a visual you can check the website (just remove the *) *onholdmusicsource*.com In the body section I would like to make each of the dark red section titles a link that when rolled over will change the hover state of the corresponding "more" button. Comments would be fine Ideas would be great Solutions would be fantastic Many Thanks- I am working on a website for a client and I am having trouble following A List Apart's tutorial (I can't link yet). I have a working css dropdown menu using a css sprite. But what I am trying to do, is when you mouse over a dropdown and go down the dropdown, that the parent menu remains at it's hover state. Currently what is happening is as soon as I mouseout of the parent level it goes back to the normal state. I don't really want to post the link to the test site itself if I don't have to for client privacy. Please help! I'm getting way too frustrated now, I've look at so many examples and nothing seems to work. I don't even need the javascript, I just need it to work. I've experimented with javascript and without. This is the code I am using: javascript: Code:
<script type="text/javascript">
<!--
startList = function() {
if (document.all&&document.getElementById) {
menuRoot = document.getElementById("menu");
for (i=0; i<menuRoot.childNodes.length; i++) {
node = menuRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//->
</script>
HTML Markup: Code: <div id="nav"> <ul id="menu"> <li><a href="index.php" class="home"></a></li> <li><a href="link" class="tour"></a></li> <li><a href="link" class="events"></a> <ul class="drop"> <li><a href="/events/calendar">Calendar</a></li> <li><a href="/events">Ag Science Hall of Fame</a></li> <li><a href="/events/tastes">TASTES</a></li> </ul> </li> <li><a href="news" class="news">News</a> <ul class="drop"> <li><a href="link">Legislation</a></li> <li><a href="news/latest-news">Latest News</a></li> <li><a href="/news/newsletter">Newsletter</a></li> <li><a href="news/in-the-media">In the Media</a></li> </ul> </li> <li><a href="link"></a></li> <li><a href="link"></a></li> </ul> </div> Menu CSS: Code: #nav {
position: relative;
float:left;
width:940px;
height:35px;
z-index: 9;
background: #fff;
}
#menu, #menu ul {
position: relative;
padding:0;
margin:0;
clear:both;
float:left;
width:455px;
z-index: 9;
}
#menu ul.drop {
background:#520006;
/* padding:10px;*/
width:inherit;
clear:both;
float:left;
margin-top:35px;
z-index: 9;
}
#menu ul.drop li {
width: 130px;
clear:both;
padding: 5px;
z-index: 9;
}
#menu ul.drop li:hover {
background: #c10101;
z-index: 9;
}
#menu ul.drop a {
color:#fff;
font-size:11px;
text-decoration:none;
font-weight:normal;
clear:both;
float:left;
z-index: 9;
}
#menu a {
display: block;
/*width: 10em;*/
float:left;
clear:both;
width:130px;
}
#menu li {
float: left;
/*width: 10em;*/
}
#menu li ul {
position: absolute;
width: 10em;
left: -999em;
z-index: 9;
}
#menu li:hover ul {
left: auto;
}
#menu li:hover ul, #menu li.sfhover ul {
left: auto;}
/*SPRITE BACKGROUP POSITIONING*/
#menu li a.home, #menu li a.tour, #menu li a.events, #menu li a.news, #menu li a.donate, #menu li a.involved, #menu li a.resources, #menu li a.about, #menu li a.contact {
float:left;
background:url('images/menu.jpg') no-repeat;
height:35px;
text-indent:-999999px;
}
#menu li a.home:hover, #menu li a.home.over {background-position: 0px -35px;}
#menu li a.home {width: 62px;}
#menu li a.tour:hover {background-position: -62px -35px;}
#menu li a.tour {width: 63px; background-position: -62px 0px;}
#menu li a.events:hover, #menu li a.events.hover {background-position: -125px -35px;}
#menu li a.events {width: 101px; background-position: -125px 0px;}
#menu li a.news:hover {background-position: -226px -35px;}
#menu li a.news {width: 80px; background-position: -226px 0px;}
#menu li a.donate:hover {background-position: -306px -35px;}
#menu li a.donate {width: 75px; background-position: -306px 0px;}
#menu li a.involved:hover {background-position: -381px -35px;}
#menu li a.involved {width: 74px; background-position: -381px 0px;}
ul {list-style: none;}
Hi all, I'm having some trouble with my code for a CSS nav bar. I'm all new to this so am not sure where to start. At present my nav bar is working fine. The only problem I am having is when one hovers over a new drop down item the parent doesn't change back to the non hovered state, it remains showing background image for the hover. Here is my test page... http://www.seattleunderground.co.uk/testmenu.html and here is the CSS code... Code: .menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 100% "Marker Felt", "Comic Sans", sans-serif;
font-size:15px;
font-weight:bold;
}
.menu ul{
background:#000000;
height:150px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
width:150px;
padding:0px;
}
.menu li a{
background:url("images/BkgButtonUp.png");
color:#ffffff;
display:block;
font-weight:normal;
line-height:48px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background:url("images/BkgButtonHov.png");
color:#000000;
text-decoration:none;
}
.menu li ul{
background:url("images/BkgButtonUp.png");
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:150;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:url("images/BkgButtonUp.png");
display:block;
float:none;
margin:0px;
padding:0px;
width:150px;
}
.menu li:hover li a{
background:url("images/BkgButtonUp.png");
color:#ffffff;
}
.menu li ul a{
display:block;
height:48px;
font-size:15px;
font-style:"Marker Felt", "Comic Sans", sans-serif;
margin:0px;
padding:0px 10px 0px 15px;
text-align:center;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:url("images/BkgButtonHov.png");
border:0px;
color:#000000;
text-decoration:none;
}
.menu p{
clear:left;
}
Please can some kind soul check this out and tell me where I need to add what lines to have the parents change back to BKGButtonUp.png. I want each item to turn white as I go through them. Thanks v.much. P.s. Is it possible to use Marker Felt Wide as the font? At the mo the writing is quite small, and changing font size shifts everything. I used Marker Felt Wide on the main site, but created my nav menu using Flash at first. Flash is causing some issues however so I must change to CSS to fix things. www.seattleunderground.co.uk Best regards, Ash This is what i am using as my page, and i only want to highlight the top part i.e only test and not the lowers. when i include the current page highlight class to the menu the whole section is highlighted, is there a way to highlight just the li and not the ul under the li that are contained within the same class. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <title>Test</title> <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"> <style type="text/css" media="screen"> /* horizontal menu coding */ #nav { float: left; margin: 0 0 1em 0; padding: 0; list-style: none; } #nav li { float: left; } #nav li a { display:block; padding: 7px 23.9px; text-decoration: none; font-family:"Arial"; color: white; border-right: 1px solid #ccc; border-bottom: 1px dashed #ccc; font-size: 14px; background-color: #3f6fb7; } } #nav li a:hover { color: #3f6fb7; background-color: #d1cf9f; } #nav pageHorizontal a { background:#d1cf9f; color: white; } #nav ul.current-pagelowerHorizontal a { background:#d1cf9f; color: white; } #nav #nav-home a { background:#d1cf9f; color: white; /* declarations to style the current state */ } /* Print menu coding */ </style> </head> <body onLoad="preloadImages();" bgcolor="#ffffff"> <div class="ts-1-13"> <ul id="nav"> <li id="nav-home" > <a href="testnewMenu.html">test</a> <!--for the new menu --> <ul id="nav"> <a href="XXX.html">Lower 1 </a> </ul> <ul id="nav"> <a href="XXX.html">Lower 2</a> </ul> <ul id="nav"> <a href="XXX.html">Lower 3 </a> </ul> <ul id="nav"> <a href="XXX.html"> Lower 4</a> </ul> <!--for the new menu ul under a list --> </li> <li> <a href="XXX.html">Test2</a> </li> <li> <a href="XXX.cfm">test 3</a> </li> <li> <a href="About_Us.html">About Us</a> </li> </ul> </div> </body> </html>
I have the following:
PHP Code: <td id="nav-01" onmouseover="this.className='classover'" onmouseout="this.className=''">Home</td> I realise the "this.className" will produce a class of "classover" when I do a mouseover. However I already have an id="nav-o1" and therefore the class will not overwrite this.... they are both setting different background colours to the column. Can anyone help me? PHP Code: <td id="nav-01">Home</td> That is the basic code and I would like background colour to change when doing a mouseover and then revert to original when mouse goes away. As much CSS as possible and as little javascript... Please! I am a chef by trade, but am re-doing my website for a better online experience for my clients. I want to keep my same css coding, but for the life of me, I cannot change the active menu page to a different background to show the current active page...please help and thanks! Cheers ~Kat Menu bar at: (cater-express dot com) I am 99.99999% sure that there is no way to do this in pure CSS but just in case. I have tabbed navigation. When a user clicks on a link it loads that page from the server (a page refresh). The corresponding nav tab should then be in its active state. Does CSS support this at all? I am happy to run a server side script to set an item to "current" but I would like to know if there is any way around it. Thanks. |
|||||||