Help with a Navigation Bar

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

ebgames56
Forum Contributor
Posts: 103
Joined: Thu Oct 06, 2011 10:43 am

Help with a Navigation Bar

Post 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
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Help with a Navigation Bar

Post by Celauran »

You've given us nothing to work with. Post the relevant code and we can make suggestions based on that.
ebgames56
Forum Contributor
Posts: 103
Joined: Thu Oct 06, 2011 10:43 am

Re: Help with a Navigation Bar

Post by ebgames56 »

ill post the html and css
ebgames56
Forum Contributor
Posts: 103
Joined: Thu Oct 06, 2011 10:43 am

Re: Help with a Navigation Bar

Post 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 ---------------------- */
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.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Help with a Navigation Bar

Post 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.
ebgames56
Forum Contributor
Posts: 103
Joined: Thu Oct 06, 2011 10:43 am

Re: Help with a Navigation Bar

Post by ebgames56 »

i dont know how to do that. can u post the code for that
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Help with a Navigation Bar

Post 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>
ebgames56
Forum Contributor
Posts: 103
Joined: Thu Oct 06, 2011 10:43 am

Re: Help with a Navigation Bar

Post by ebgames56 »

i cant post that css in the html
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Help with a Navigation Bar

Post by Celauran »

ebgames56 wrote:i cant post that css in the html
Can't post what CSS in what HTML? More importantly, why not?
ebgames56
Forum Contributor
Posts: 103
Joined: Thu Oct 06, 2011 10:43 am

Re: Help with a Navigation Bar

Post by ebgames56 »

All i want is 2 drop down boxes on the Media
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Help with a Navigation Bar

Post 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.
ebgames56
Forum Contributor
Posts: 103
Joined: Thu Oct 06, 2011 10:43 am

Re: Help with a Navigation Bar

Post by ebgames56 »

i added the code u posted. but it adds another box because the media it doesnt do a drop
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Help with a Navigation Bar

Post by Celauran »

ebgames56 wrote:but it adds another box because the media it doesnt do a drop
I don't understand what this means.
ebgames56
Forum Contributor
Posts: 103
Joined: Thu Oct 06, 2011 10:43 am

Re: Help with a Navigation Bar

Post by ebgames56 »

it means it doesnt add a drop box under Media
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Help with a Navigation Bar

Post by Celauran »

Post your modified code -- use [ syntax=html] please -- and I'll take a look.
Post Reply