Customizing a CSS and JS driven navigation menu
Question
I have a menu I'm using for a website and it uses some javascript to create some fading effects. The problem I'm having is that the submenu is not visible until one of the main links is hovered over. The stylesheet for the submenu calls out display: none which obviously shows nothing when the page is loaded. I want the submenu to show right away since it is visible in my design. The website is here .
I have tried to remove the display:none line and it makes all instances of the submenu visible instead which is not very pretty :)
Any help would be appreciated. Do I need to restructure the divs somehow? I created this site when I was still a cherry at css. I know a lot more now but obviously, I still get confused :P
4 answers
solution1
0 2011-03-21 16:57:45
You can add this css rule:
#visitors.submenustyle {
display: block;
}
solution2
0 2011-03-21 17:06:11
You should be able to do this fairly easily with JQuery. You will need to add another class to your CSS that overrides the 'submenustyle' class that you have set. In the example below a class of 'active' would have the following property code:
.active{display:block}
Then place the following in your header along a reference to a Jquery library file: You could use Google hosted (https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js)
$("ul#maintab li a").hover(function () { var getvalue = $(this).attr('rel'); $(getvalue).toggleClass("active") } );
This will give you the show and hide that function that you are missing. If you want to add a fade, you would be able to add a duration to the script as below where the number is the time it takes to complete the transition:
$("ul#maintab li a").hover(function () { var getvalue = $(this).attr('rel'); $(getvalue).toggleClass("active", 500) } );
I believe this will work if you add '#' before your rel names.
solution3
0 2011-03-21 17:18:00
My first suggestion is to restructure and use CSS (no JavaScript) leveraging the :hover pseudo-class.
Here's an example of what mean:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>Customizing a CSS and JS driven navigation menu</title>
<style type="text/css">
#maintab {
position:relative;
top:0px;
left:0px;
height:50px;
margin:0px;
padding:0px;
}
#maintab li {
float:left;
margin:0px;
padding:2px;
padding-bottom:22px;
list-style:none;
}
#maintab .submenustyle {
position:absolute;
top:25px;
left:0px;
display:none;
}
#maintab #visitors {
display:block;
}
#maintab li:hover .submenustyle {
display:block;
}
</style>
</head>
<body>
<ul class="basictab" id="maintab">
<li rel="visitors" rev="maintab">
<a href="#">Visitors</a>
<div class="submenustyle" id="visitors">
<a href="calendar_events.php">Calendar Events</a>
<a href="stay.php">Lodging</a>
<a href="eat.php">Dining</a>
<a href="arts.php">Arts/Heritage/Culture</a>
<a href="attractions.php">Attractions</a>
<a href="outdoor_rec.php">Outdoor Recreation</a>
<a href="shopping.php">Shopping</a>
<a href="transportation.php">Transportation</a>
<a href="resources.php">Resources</a>
<a href="request_travel_planner.php">Request Travel Planner</a>
<a href="map.php">Vicinity Map</a></div>
</li>
<li rel="planners" rev="maintab">
<a href="#">Meeting Planners</a>
<div class="submenustyle" id="planners">
<a target="_blank" href="meetingplanner.pdf">Download Meeting Planners Guide</a>
<a href="request_planner.php">Request Meeting Planners Guide</a>
<a href="request_proposal.php">Request for Proposal</a></div>
</li>
<li rel="media" rev="maintab">
<a href="#">Media</a>
<div class="submenustyle" id="media">
<a href="media_form.php">Request For Media Form</a>
<a href="#"></a></div>
</li>
<li rel="members" rev="maintab">
<a href="#">Members</a>
<div class="submenustyle" id="members">
<a href="../events_news.php">News/Events</a>
<a target="_blank" href="MembershipBenefits.pdf">Member Benefits Brochure</a>
<a href="members.php">Become a Member</a>
<a href="members_directory.php">Business Directory</a>
<a href="staff.php">Contact Staff</a></div>
</li>
<li rel="about" rev="maintab">
<a href="about.php">About Us</a>
<div class="submenustyle" id="about">
<a href="about.php">About VCB</a>
<a href="contacts.php">VCB Address and Phone Numbers</a>
<a href="map.php">Vicinity Map</a>
<a href="careers.php">Careers</a></div>
</li>
<li rel="deals" rev="maintab">
<a href="deals.php">Deals</a>
<div class="submenustyle" id="deals">
<a href="deal_event.php">Capitol Experience</a>
<a href="deal_hotel.php">Hotel Packages</a>
<a href="deal_more.php">More Deals</a>
</div>
</li>
</ul>
</body>
</html>
There are two advantages to this solution:
- It is a more conventional way to structure a navigation menu.
- It will work even when JavaScipt is disabled or crashes
solution4
0 2011-03-21 17:34:59
My second answer is to first clean up your HTML ( <li> doesn't have a rel nor a rev attribute! Move those attributes to the anchors <a> ) and use jQuery:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Customizing a CSS and JS driven navigation menu</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<style type="text/css">
#maintab {
position:relative;
top:0px;
left:0px;
height:50px;
margin:0px;
padding:0px;
}
#maintab li {
float:left;
margin:0px;
padding:2px;
padding-bottom:22px;
list-style:none;
}
.submenustyle {
display:none;
}
#visitors {
display:block;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#maintab li a").mouseenter(function() {
var identifier = $(this).attr("rel");
$(".submenustyle").css("display","none");
$("#"+identifier).css("display","block");
}).mouseleave(function() {
var identifier = $(this).attr("rel");
$(".submenustyle").css("display","");
});
});
</script>
</head>
<body>
<div id="nav">
<ul class="basictab" id="maintab">
<li><a href="#" rel="visitors" rev="maintab">Visitors</a></li>
<li><a href="#" rel="planners" rev="maintab">Meeting Planners</a></li>
<li><a href="#" rel="media" rev="maintab">Media</a></li>
<li><a href="#" rel="members" rev="maintab">Members</a></li>
<li><a href="about.php" rel="about" rev="maintab">About Us</a></li>
<li><a href="deals.php" rel="deals" rev="maintab">Deals</a></li>
</ul>
<div class="submenustyle" id="planners">
<a target="_blank" href="meetingplanner.pdf">Download Meeting Planners Guide</a>
<a href="request_planner.php">Request Meeting Planners Guide</a> <a href=
"request_proposal.php">Request for Proposal</a>
</div>
<div class="submenustyle" id="visitors">
<a href="calendar_events.php">Calendar Events</a> <a href="stay.php">Lodging</a>
<a href="eat.php">Dining</a> <a href="arts.php">Arts/Heritage/Culture</a> <a href=
"attractions.php">Attractions</a> <a href="outdoor_rec.php">Outdoor Recreation</a>
<a href="shopping.php">Shopping</a> <a href="transportation.php">Transportation</a>
<a href="resources.php">Resources</a> <a href="request_travel_planner.php">Request
Travel Planner</a> <a href="map.php">Vicinity Map</a>
</div>
<div class="submenustyle" id="media">
<a href="media_form.php">Request For Media Form</a> <a href="#"></a>
</div>
<div class="submenustyle" id="members">
<a href="../events_news.php">News/Events</a> <a target="_blank" href=
"MembershipBenefits.pdf">Member Benefits Brochure</a> <a href="members.php">Become
a Member</a> <a href="members_directory.php">Business Directory</a> <a href=
"staff.php">Contact Staff</a>
</div>
<div class="submenustyle" id="about">
<a href="about.php">About VCB</a> <a href="contacts.php">VCB Address and Phone
Numbers</a> <a href="map.php">Vicinity Map</a> <a href="careers.php">Careers</a>
</div>
<div class="submenustyle" id="deals">
<a href="deal_event.php">Capitol Experience</a> <a href="deal_hotel.php">Hotel
Packages</a> <a href="deal_more.php">More Deals</a>
</div>
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.