Help with a Navigation Bar
Moderator: General Moderators
Help with a Navigation Bar
I got a navigation bar template offline. and just wondering how am I able to make just 1 of those a drop down box????
thanks
thanks
Re: Help with a Navigation Bar
You've given us nothing to work with. Post the relevant code and we can make suggestions based on that.
Re: Help with a Navigation Bar
ill post the html and css
Re: Help with a Navigation Bar
Code: Select all
<!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">
<head>
<title>The Guitar Manifesto</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="styles.css" type="text/css" />
<style type="text/css">
body {
background-image: url(background1.png);
background-repeat: repeat-x;
background-color: #00b3ff;
}
body,td,th {
color: #FFF;
}
</style>
</head>
<body>
<IMG class="logo" src="Szerykblue_sm.png" alt=".." />
<div id="dolphincontainer">
<div id="dolphinnav">
<ul>
<li><a href="" class="current"><span>Home</span></a></li>
<li><a href="tour.html"><span>Tour</span></a></li>
<li><a href="album.html"><span>Album</span></a></li>
<li><a href="band.html"><span>Band</span></a></li>
<li><a href="media.html"><span>Media</span></a></li>
<li><a href="contact.html"><span>Contact</span></a></li>
</ul>
</div>
</div>
<h2>Lastest Updates</h2>
</body>
</html>
h1 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
margin:0;
padding:0;
}
hr {
border:none;
border-top:1px solid #CCCCCC;
height:1px;
margin-bottom:25px;
}
IMG.logo {
display: block;
margin-left: auto;
margin-right: auto }
h2 {text-align:center}
h4 {text-align:center}
/* ---------------------- Dolphin nav ---------------------- */
#dolphincontainer{
position:relative;
height:56px;
color:#E0E0E0;
width:100%;
font-family:Helvetica,Arial,Verdana,sans-serif;
}
#dolphinnav{
position:relative;
height:33px;
font-size:12px;
text-transform:uppercase;
font-weight:bold;
background: url(dolphin_bg.gif) repeat-x bottom left;
padding:0 0 0 425px;
}
#dolphinnav ul{
margin:0;
padding:0;
list-style-type:none;
width:auto;
float:left;
}
#dolphinnav ul li{
display:block;
float:left;
margin:0 1px;
}
#dolphinnav ul li a{
display:block;
float:left;
color:#EAF3F8;
text-decoration:none;
padding:0 0 0 20px;
height:33px;
}
#dolphinnav ul li a span{
padding:12px 20px 0 0;
height:21px;
float:left;
}
#dolphinnav ul li a:hover{
color:#fff;
background:transparent url(dolphin_bg-OVER.gif) repeat-x bottom left;
}
#dolphinnav ul li a:hover span{
display:block;
width:auto;
cursor:pointer;
}
#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{
color:#fff;
background:#1D6893 url(dolphin_left-ON.gif) no-repeat top left;
line-height:275%;
}
#dolphinnav ul li a.current span{
display:block;
padding:0 20px 0 0;
width:auto;
background:#1D6893 url(dolphin_right-ON.gif) no-repeat top right;
height:33px;
}
/* ---------------------- END Dolphin nav ---------------------- */
Last edited by Benjamin on Thu Oct 20, 2011 11:08 am, edited 1 time in total.
Reason: Added [syntax=php|sql|css|javascript] and/or [text] tags.
Reason: Added [syntax=php|sql|css|javascript] and/or [text] tags.
Re: Help with a Navigation Bar
Since you're using a list for the menu, you can add a sublist to any 'parent' menu, hide it, and display it on hover.
Re: Help with a Navigation Bar
i dont know how to do that. can u post the code for that
Re: Help with a Navigation Bar
This should give you a rough idea.
Code: Select all
<!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">
<head>
<title>The Guitar Manifesto</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="styles.css" type="text/css" />
<style type="text/css">
body
{
background-color: #00b3ff;
}
body,td,th
{
color: #FFF;
}
.parentmenu
{
position: relative;
}
.submenu
{
display: none;
margin: 0;
padding: 0;
}
.parentmenu:hover .submenu
{
display: block;
position: absolute;
top: 30px;
left: 0;
}
</style>
</head>
<body>
<IMG class="logo" src="Szerykblue_sm.png" alt=".." />
<div id="dolphincontainer">
<div id="dolphinnav">
<ul>
<li class="parentmenu">
<a><span>Home</span></a>
<ul class="submenu">
<li>Whatever</li>
<li>Whatever</li>
<li>Whatever</li>
</ul>
</li>
<li><a href="tour.html"><span>Tour</span></a></li>
<li><a href="album.html"><span>Album</span></a></li>
<li><a href="band.html"><span>Band</span></a></li>
<li><a href="media.html"><span>Media</span></a></li>
<li><a href="contact.html"><span>Contact</span></a></li>
</ul>
</div>
</div>
<h2>Lastest Updates</h2>
</body>
</html>Re: Help with a Navigation Bar
i cant post that css in the html
Re: Help with a Navigation Bar
Can't post what CSS in what HTML? More importantly, why not?ebgames56 wrote:i cant post that css in the html
Re: Help with a Navigation Bar
All i want is 2 drop down boxes on the Media
Re: Help with a Navigation Bar
I placed three under Home just to show you how it could be done. It should be trivial for you to change.
You still haven't explained what CSS you're unable to post and where.
You still haven't explained what CSS you're unable to post and where.
Re: Help with a Navigation Bar
i added the code u posted. but it adds another box because the media it doesnt do a drop
Re: Help with a Navigation Bar
I don't understand what this means.ebgames56 wrote:but it adds another box because the media it doesnt do a drop
Re: Help with a Navigation Bar
it means it doesnt add a drop box under Media
Re: Help with a Navigation Bar
Post your modified code -- use [ syntax=html] please -- and I'll take a look.