Page 1 of 2

Help with a Navigation Bar

Posted: Thu Oct 20, 2011 9:22 am
by ebgames56
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

Re: Help with a Navigation Bar

Posted: Thu Oct 20, 2011 9:42 am
by Celauran
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

Posted: Thu Oct 20, 2011 9:47 am
by ebgames56
ill post the html and css

Re: Help with a Navigation Bar

Posted: Thu Oct 20, 2011 9:48 am
by ebgames56

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 ---------------------- */

Re: Help with a Navigation Bar

Posted: Thu Oct 20, 2011 9:59 am
by Celauran
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

Posted: Thu Oct 20, 2011 10:06 am
by ebgames56
i dont know how to do that. can u post the code for that

Re: Help with a Navigation Bar

Posted: Thu Oct 20, 2011 10:09 am
by Celauran
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

Posted: Thu Oct 20, 2011 10:13 am
by ebgames56
i cant post that css in the html

Re: Help with a Navigation Bar

Posted: Thu Oct 20, 2011 10:13 am
by Celauran
ebgames56 wrote:i cant post that css in the html
Can't post what CSS in what HTML? More importantly, why not?

Re: Help with a Navigation Bar

Posted: Thu Oct 20, 2011 10:14 am
by ebgames56
All i want is 2 drop down boxes on the Media

Re: Help with a Navigation Bar

Posted: Thu Oct 20, 2011 10:16 am
by Celauran
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.

Re: Help with a Navigation Bar

Posted: Thu Oct 20, 2011 10:18 am
by ebgames56
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

Posted: Thu Oct 20, 2011 10:19 am
by Celauran
ebgames56 wrote:but it adds another box because the media it doesnt do a drop
I don't understand what this means.

Re: Help with a Navigation Bar

Posted: Thu Oct 20, 2011 10:25 am
by ebgames56
it means it doesnt add a drop box under Media

Re: Help with a Navigation Bar

Posted: Thu Oct 20, 2011 10:26 am
by Celauran
Post your modified code -- use [ syntax=html] please -- and I'll take a look.