Jump to content

[SOLVED] Help with site Nav....


dipp02

Recommended Posts

Hi everyone and thanks for looking at my thread.

 

I am coding a website that has a similar site navigation as the one here.

 

Now this is what i was going to do:

Have about 4 rollover images and when you’re on that page the image will be highlighted.

(like the home button above)

And to do this i was just going to put html code in every page and change whichever image that page is under. For example, if it was index.php the user was browsing i would make the image not rollover and just stay highlighted instead by placing an img and link tag there.

 

Here is the code:

        
<!--START NAVIGATION content -->
        <table width="831" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td width="157" valign="bottom"><a href='index.php'><img src="images/homeBut2.jpg" alt="Home Page" width="157" height="27" border="0" /></a></td>
          <td width="161" valign="bottom"><a href="packages.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Packages','','images/packagesBut2.jpg',1)"><img src="images/packagesBut1.jpg" alt="Packages" name="Packages" width="161" height="27" border="0" id="Packages" /></a></td>
          <td width="160" valign="bottom"><a href="designs.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Web Designs','','images/webDesigns2.jpg',1)"><img src="images/webDesigns1.jpg" alt="Web Designs" name="Web Designs" width="160" height="27" border="0" id="Web Designs" /></a></td>
         </tr>
      </table>
<!--END NAVIGATION content -->

 

But i started thinking i could probably just write one piece of php code, that includes, let’s say sitenav.inc, where ever i wanted it to show up and i wouldn’t have to edit each and every page just in case there is an addition to the navigation or something.

 

i just need some help starting this or if this can be done with php.

 

Thanks in advance, dipp02

 

Link to comment
Share on other sites

OK yeah i thought you could by using the include Statement

 

But im having problems coding it.

 

 

How would i make it show the correct highlighted image on each individual page?

 

Would i use an if statement?

i don’t know how to get this code started.  I know how to do the html fine.

I just need to figure out the code part and how it’s going to know when to change the image to the stand alone highlighted image.

 

 

The index.php highlighted image is “images/homeBut2.jpg”

And the packages.php highlighted image is “images/packBut2.jpg”

 

 

But I also don’t want it to rollover when the user is on that page. That’s when it will show the highlighted image. all other link buttons will rollover though.

 

If you would like I can post a link to a working example of what im talking about. Let me know if your confused in anyway.

 

Thanks. 

 

Link to comment
Share on other sites

OK COOL.

 

So your saying, inside index.php or packages.php i declare a var and put the if statement in there?

 

Not physically in the menu file  nav.inc? do i just have the html code in there?

 

Can you give me an example of the if statement ?

 

 

Thanks for all your help.

 

 

 

 

 

Link to comment
Share on other sites

;D Yup... sorry for mis using terms

 

But

 

Im going to try it myself...

 

i will post if i run into any problems. which i sure i will at some point.

 

 

But if someone could just post a sample code that i could look over and get an idea of what im actually doing that would be great.

 

If not i will post my code and see what kind of help i  need.

 

Thanks again

Link to comment
Share on other sites

You could easily just make say.... your on index.php, change the picture of "home" or whatever so it is a different color or anything. Then for login.php make the picture for "login" a different color.. etc.

 

Im not following you? im using images for my nav.

 

i will post an example of my nav shortly...

Link to comment
Share on other sites

I think you are better off trying something like this:

 

http://css-tricks.com/id-your-body-for-greater-css-control-and-specificity/

 

ahh yes... would this be better/easier instead of doing php?

 

Can i still just use the one .inc file instead of adding the nav to each and every page?

 

duh i didnt read it all the way sorry.

 

i will check this out thanks

Link to comment
Share on other sites

Yes. You can have the nav in an inc file. You would still need to use PHP to get the page name. I am running out of time now but if this is not answer when I check tomorrow and have time, I'll write up the code for you since I know where you are heading.

Link to comment
Share on other sites

Yes. You can have the nav in an inc file. You would still need to use PHP to get the page name. I am running out of time now but if this is not answer when I check tomorrow and have time, I'll write up the code for you since I know where you are heading.

 

Thanks ill post my results..

 

Thanks again

Link to comment
Share on other sites

I am getting stuck here.

 

Im using javascript for my rollover and im having a problem displaying the standalone image...

 

in my nav.inc i have this:

<!-- START nav.inc -->  
        <table width="816" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td width="136" valign="bottom" class="index"><a href="index.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','images/homeBut2.jpg',1)"><img src="images/homeBut1.jpg" alt="Home Page" name="Home" width="136" height="19" border="0" id="Home" /></a></td>
          <td width="136" valign="bottom"><a href="packages.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Packages','','images/packBut2.jpg',1)"><img src="images/packBut1.jpg" alt="Hosting Packages" name="Packages" width="136" height="19" border="0" id="Packages" /></a></td>
          <td width="136" valign="bottom"><a href="designs.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Web Designs ','','images/wedBut2.jpg',1)"><img src="images/wedBut1.jpg" alt="Web Designs" name="Web Designs " width="136" height="19" border="0" id="Web Designs " /></a></td>
          <td width="136" valign="bottom"><a href="about.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('About Us','','images/aboutBut2.jpg',1)"><img src="images/aboutBut1.jpg" alt="About Us" name="About Us" width="136" height="19" border="0" id="About Us" /></a></td>
          <td width="136" valign="bottom"><a href="support.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Support Center','','images/supportBut2.jpg',1)"><img src="images/supportBut1.jpg" alt="Support Center" name="Support Center" width="136" height="19" border="0" id="Support Center" /></a></td>
          <td width="136" valign="bottom"><a href="mydbhosts.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('My Account','','images/naccountBut2.jpg',1)"><img src="images/naccountBut1.jpg" alt="My Account" name="My Account" width="136" height="19" border="0" id="My Account" /></a></td>
        </tr>
        <tr>
        <td height="43" colspan="7" valign="top" background="images/subHeader.jpg"><p> </p>
        </td>
        </tr>
      </table>
<!-- END nav.inc -->  

 

This prob doesnt matter but I am also using an header.inc and an footer.inc for my banner head info and copyright info.

 

 

But im confused on how to 'delete' the current rollover image and javascript code from that current cell and then displaying the standalone 'highlighted' image with a link.

 

IM using tables and images in my code and a styles.css...

 

im reading the link i was given by ducket but when i try and change the background image it only change sthe cells background image which of course isnt doing anything since i have an rollover image in that cell.

 

Also i used dreamweaver to make the rollover images if that matters.

Link to comment
Share on other sites

OK the only way i could think of doing this was makin an if else statement in the nav.inc

 

this is what i have and it looks like its working but now im having problems with the javascript rollover.

 

i try and echo the javascript but it doesnt want to work. is there a way to make this work the way i have it?

 

nav.inc


<!-- START nav.inc -->  
<? 
        echo" <table name='nav' width='816' border='0' align='center' cellpadding='0' cellspacing='0'>
        	<tr>
         	 ";
          /* INDEX.php */
          if ($page == 'index')
          	{ 
          		echo "<td width='136' valign='bottom'><a href='index.php'><img src='images/homeBut2.jpg' alt='Home Page' name='Home' width='136' height='19' border='0' id='Home'' /> </a>
          		</td>";
          	}
          else
          {
          		echo"<td width='136' valign='bottom'><a href='index.php' onmouseout='MM_swapImgRestore()' onmouseover='MM_swapImage('Home','','images/homeBut2.jpg',1)'><img src='images/homeBut1.jpg' alt='Home Page' name='Home' width='136' height='19' border='0' id='Home' /></a> 
          		</td>";
          }
	/* PACKAGES.php */
          if ($page == 'packages')
          	{ 
          		echo "<td width='136' valign='bottom'><a href='packages.php'><img src='images/packBut2.jpg' alt='Hosting Packages' name='Packages' width='136' height='19' border='0' id='Packages'' /> </a>
          		</td>";
          		exit;
          	}
          else
          {
          		echo"  <td width='136' valign='bottom' ><a href='packages.php' onmouseout='MM_swapImgRestore()' onmouseover='MM_swapImage('Packages','','images/packBut2.jpg',1)'><img src='images/packBut1.jpg' alt='Hosting Packages' name='Packages' width='136' height='19' border='0' id='Packages' /></a></td> ";
          		
          }
        /* DESIGNS.php */
          if ($page == 'designs')
          	{ 
          		echo "<td width='136' valign='bottom'><a href='designs.php'><img src='images/wedBut2.jpg' alt='Web Designs' name='Web Designs' width='136' height='19' border='0' id='Web Designs'' /> </a>
          		</td>";
          		exit;
          	}
          else
          {
          		echo "<td width='136' valign='bottom'><a href='designs.php' onmouseout='MM_swapImgRestore()' onmouseover='MM_swapImage('Web Designs ','','images/wedBut2.jpg',1)'><img src='images/wedBut1.jpg' alt='Web Designs' name='Web Designs ' width='136' height='19' border='0' id='Web Designs' /></a>
          		</td>";
          }
          /* ABOUT.php */
          if ($page == 'about')
          	{ 
          		echo "<td width='136' valign='bottom'><a href='about.php'><img src='images/aboutBut2.jpg' alt='About Us' name='About Us' width='136' height='19' border='0' id='About Us' /> </a>
          		</td>";
          		exit;
          	}
          else
          {
          		echo "<td width='136' valign='bottom'><a href='about.php' onmouseout='MM_swapImgRestore()' onmouseover='MM_swapImage('About Us','','images/aboutBut2.jpg',1)'><img src='images/aboutBut1.jpg' alt='About Us' name='About Us' width='136' height='19' border='0' id='About Us' /></a>
          		</td>";
          }
         /* SUPPORT.php */
          if ($page == 'about')
          	{ 
          		echo "<td width='136' valign='bottom'><a href='support.php'><img src='images/supportBut2.jpg' alt='Support Center' name='Support Center' width='136' height='19' border='0' id='Support Center' /> </a>
          		</td>";
          		exit;
          	}
          else
          {
          		echo "<td width='136' valign='bottom'><a href='support.php' onmouseout='MM_swapImgRestore()' onmouseover='MM_swapImage('Support Center','','images/supportBut2.jpg',1)'><img src='images/supportBut1.jpg' alt='Support Center' name='Support Center' width='136' height='19' border='0' id='Support Center' /></a>
          		</td>";
          }
        /* MYDBHOSTS.php */
          if ($page == 'about')
          	{ 
          		echo "<td width='136' valign='bottom'><a href='mydbhosts.php'><img src='images/naccountBut2.jpg' alt='My Account' name='My Account' width='136' height='19' border='0' id='My Account' /> </a>
          		</td>";
          		exit;
          	}
          else
          {
          		echo "<td width='136' valign='bottom'><a href='mydbhosts.php' onmouseout='MM_swapImgRestore()' onmouseover='MM_swapImage('My Account','','images/naccountBut2.jpg',1)'><img src='images/naccountBut1.jpg' alt='My Account' name='My Account' width='136' height='19' border='0' id='My Account' /></a>
          		</td>";
          }
       echo"</tr>
        	<tr>
        		<td height='43' colspan='7' valign='top' background='images/subHeader.jpg'><p> </p>
        		</td>
        	</tr>
      		</table>";
?>
<!-- END nav.inc -->  

Link to comment
Share on other sites

You could easily just make say.... your on index.php, change the picture of "home" or whatever so it is a different color or anything. Then for login.php make the picture for "login" a different color.. etc.

 

Im not following you? im using images for my nav.

 

i will post an example of my nav shortly...

 

Yes your using images for your nav. But you could simply make a new image, thats a different color or however you want it highlighted for each page displayed.

eg:  Page=login.php                              Page=index.php

      [ INDEX ] (Normal Version)        [ INDEX ] (Highlighted Version

      [LOGIN]  (Highlighted Version)    [LOGIN] (Normal Version)

        [HELP]                                  [HELP]

        [GUIDE]                                 [GUIDE]

Link to comment
Share on other sites

I thought I'd never have to deal with that Horrible JavaScript hover button again.

 

Using CSS for Hover Buttons is so much easier when it comes down to the HTML Script. Plus, With CSS; you only need the Background image for the button (3 in 1 along side each other) and it loads so much faster than JScript (Image wise), plus it supports more Browsers and People who do not have JavaScript enabled.

 

CSS hover buttons shouldn't give you the problem that the JS ones are because CSS hover buttons are generally <div class="button">Button Text</div> in the HTML.

 

If you're interested in switching to CSS buttons; I'll give you a better example of the script and the image you need. (just reply)

 

Regards,

Dan.

Link to comment
Share on other sites

You could easily just make say.... your on index.php, change the picture of "home" or whatever so it is a different color or anything. Then for login.php make the picture for "login" a different color.. etc.

 

Im not following you? im using images for my nav.

 

i will post an example of my nav shortly...

 

Yes your using images for your nav. But you could simply make a new image, thats a different color or however you want it highlighted for each page displayed.

eg:   Page=login.php                              Page=index.php

      [ INDEX ] (Normal Version)         [ INDEX ] (Highlighted Version

       [LOGIN]  (Highlighted Version)    [LOGIN] (Normal Version)

         [HELP]                                   [HELP]

         [GUIDE]                                 [GUIDE]

 

yes i see what your saying but my buttons have a slight linear gradient to it and thats why im using images.

 

 

also Malevolence-

 

I will consider to change to CSS i just want to keep the same kind of buttons that i made in photoshop. if that cant be done i will have to figure out what is going to look good. here is what i have now ... its not really working but you can see the button type. www.dbhosts.net/test/index.php

 

as you can see on that link im hvaing problems with the valign too... here is the code for nav.inc again

 

i have updated it:

<!-- START nav.inc -->  
<? 
        echo" <table name='nav' width='816' border='0' align='center' cellpadding='0' cellspacing='0'>
        	<tr>
         	 ";
          /* INDEX.php */
          if ($page == 'index')
          	{ 
          		echo"<td width='136' valign='bottom'><a href='index.php'><img src='images/homeBut2.jpg' alt='Home Page' name='Home' width='136' height='19' border='0' id='Home'' /> </a> </td>";
          	}
          else
          {
          		echo"<td width='136' valign='bottom'><a href='index.php' onmouseout='MM_swapImgRestore()' onmouseover='MM_swapImage('Home','','images/homeBut2.jpg',1)'><img src='images/homeBut1.jpg' alt='Home Page' name='Home' width='136' height='19' border='0' id='Home' /></a> </td>";
          }
	/* PACKAGES.php */
          if ($page == 'packages')
          	{ 
          		echo "<td width='136' valign='bottom' ><a href='packages.php'><img src='images/packBut2.jpg' alt='Hosting Packages' name='Packages' width='136' height='19' border='0' id='Packages'' /> </a> </td>";
           	}
          else
          {
          		echo"  <td width='136' valign='bottom' ><a href='packages.php' onmouseout='MM_swapImgRestore()' onmouseover='MM_swapImage('Packages','','images/packBut2.jpg',1)'><img src='images/packBut1.jpg' alt='Hosting Packages' name='Packages' width='136' height='19' border='0' id='Packages' /></a></td> ";
          		
          }
        /* DESIGNS.php */
          if ($page == 'designs')
          	{ 
          		echo "<td width='136' valign='bottom'><a href='designs.php'><img src='images/wedBut2.jpg' alt='Web Designs' name='Web Designs' width='136' height='19' border='0' id='Web Designs'' /> </a> </td>";
          	}
          else
          {
          		echo "<td width='136' valign='bottom'><a href='designs.php' onmouseout='MM_swapImgRestore()' onmouseover='MM_swapImage('Web Designs ','','images/wedBut2.jpg',1)'><img src='images/wedBut1.jpg' alt='Web Designs' name='Web Designs ' width='136' height='19' border='0' id='Web Designs' /></a></td>";
          }
          /* ABOUT.php */
          if ($page == 'about')
          	{ 
          		echo "<td width='136' valign='bottom'><a href='about.php'><img src='images/aboutBut2.jpg' alt='About Us' name='About Us' width='136' height='19' border='0' id='About Us' /> </a></td>";
          	}
          else
          {
          		echo "<td width='136' valign='bottom'><a href='about.php' onmouseout='MM_swapImgRestore()' onmouseover='MM_swapImage('About Us','','images/aboutBut2.jpg',1)'><img src='images/aboutBut1.jpg' alt='About Us' name='About Us' width='136' height='19' border='0' id='About Us' /></a></td>";
          }
         /* SUPPORT.php */
          if ($page == 'support')
          	{ 
          		echo "<td width='136' valign='bottom'><a href='support.php'><img src='images/supportBut2.jpg' alt='Support Center' name='Support Center' width='136' height='19' border='0' id='Support Center' /> </a></td>";
          	}
          else
          {
          		echo "<td width='136' valign='bottom'><a href='support.php' onmouseout='MM_swapImgRestore()' onmouseover='MM_swapImage('Support Center','','images/supportBut2.jpg',1)'><img src='images/supportBut1.jpg' alt='Support Center' name='Support Center' width='136' height='19' border='0' id='Support Center' /></a></td>";
          }
        /* MYDBHOSTS.php */
          if ($page == 'mydbhosts')
          	{ 
          		echo "<td width='136' valign='bottom'><a href='mydbhosts.php'><img src='images/naccountBut2.jpg' alt='My Account' name='My Account' width='136' height='19' border='0' id='My Account' /> </a></td>";
          	}
          else
          {
          		echo "<td width='136' valign='bottom'><a href='mydbhosts.php' onmouseout='MM_swapImgRestore()' onmouseover='MM_swapImage('My Account','','images/naccountBut2.jpg',1)'><img src='images/naccountBut1.jpg' alt='My Account' name='My Account' width='136' height='19' border='0' id='My Account' /></a></td>";
          }
       echo"</tr>       	<tr>        		<td height='43' colspan='7' valign='top' background='images/subHeader.jpg'><p> </p></td></tr>	</table>";
?>
<!-- END nav.inc -->  

Link to comment
Share on other sites

Hi Again,

 

I've recoded your file to CSS.

 

Here is the image you'll need to upload into the same directory as the .inc file You need to name it 'buttonhover.png':

 

2156761975_b8c723bfbf_o.png

 

Here is the CSS. Copy and Paste the following into whatever program you're using and save it as 'hoverbutton.css'

 

/* We make the NavBar Placeholder */
navbar {
margin: auto 0;
width: 816px;
height: 27px;
background-color: #FFF;
}

/* We make the normal hover button */
a.navbtn {
font-family: sans-serif;
font-size: 9pt;
font-weight: bold;
color: #ECD354;
margin: auto 0;
line-height: 29px;
text-align: center;
display: block;
width: 150px;
height: 27px;
background:  url(./buttonhover.png) 0 0 no-repeat;
float: left;
text-decoration: none;
}
a:hover.navbtn {
color: #000000;
background-position: -150px 0;
font-weight: bold;
text-decoration: none;
}

/* We make the 'Selected' state button */

a.selnavbtn {
font-family: sans-serif;
font-size: 9pt;
font-weight: bold;
color: #000000;
margin: auto 0;
line-height: 29px;
text-align: center;
display: block;
width: 150px;
height: 27px;
background:  url(./buttonhover.png) 0 0 no-repeat;
background-position: -150px 0;
float: left;
text-decoration: none;
}

 

Here is the nav.inc code:

 

<!-- START nav.inc -->  
<? 
	echo '<link rel="stylesheet" type="text/css" href="hoverbutton.css">
		<div class="navbar">
	';
          /* INDEX.php */
          if ($page == 'index')
          	{ 
          		echo '<a class="selnavbtn" href="index.php">HOME PAGE</a>';
          	}
          else
          {
          		echo '<a class="navbtn" href="index.php">HOME PAGE</a>';
          }
	/* PACKAGES.php */
          if ($page == 'packages')
          	{ 
          		echo '<a class="selnavbtn" href="packages.php">PACKAGES</a>';
           	}
          else
          {
          		echo '<a class="navbtn" href="packages.php">PACKAGES</a>';
          		
          }
        /* DESIGNS.php */
          if ($page == 'designs')
          	{ 
          		echo '<a class="selnavbtn" href="designs.php>WEB DESIGNS</a>';
          	}
          else
          {
          		echo '<a class="navbtn" href="designs.php>WEB DESIGNS</a>';
          }
          /* ABOUT.php */
          if ($page == 'about')
          	{ 
          		echo '<a class="selnavbtn" href="about.php">ABOUT US</a>';
          	}
          else
          {
          		echo '<a class="navbtn" href="about.php">ABOUT US</a>';
          }
         /* SUPPORT.php */
          if ($page == 'support')
          	{ 
          		echo '<a class="selnavbtn" href="support.php">SUPPORT CENTER</a>';
          	}
          else
          {
          		echo '<a class="navbtn" href="support.php">SUPPORT CENTER</a>';
          }
        /* MYDBHOSTS.php */
          if ($page == 'mydbhosts')
          	{ 
          		echo '<a class="selnavbtn" href="mydbhosts.php">MY ACCOUNT</a>';
          	}
          else
          {
          		echo '<a class="navbtn" href="mydbhosts.php">MY ACCOUNT</a>';
          }
       echo '</div><br><img src="images/subHeader.jpg">';
?>
<!-- END nav.inc -->  

 

Make sure all those files are in the SAME directory unless you change their corresponding paths in the CSS/.inc file.

 

I wish you the best of luck with your Hosting Company,

Regards,

Dan.

 

PS: This is roughly what it looks like: http://www.runescapez.com/dbhosts/index.php

 

EDIT: The good thing about CSS Hover buttons is that you can add/remove as many as you like without having to create new graphics; just 1 simple image with both states and you can add you're own button text on top. The best thing about having 1 image split-up is that the hover image doesn't have to load; because technically as soon as the normal button can be seen; then that means the hover has already loaded :D. I can't stand Dreamweaver's JS Hover button; it's one thing I learnt after waiting about 30 secs for a hover image to load! CSS is so customizeable so try to go for it when you can. In terms of code; CSS is very small too, while with HTML Tables, you have to write out quite a few things.

Link to comment
Share on other sites

By the way; for the hover buttons I used your old buttons, not the wider ones. I think the one I did would look good anyway but If you want me to do the same but in the http://www.dbhosts.net/test/index.php style; I don't mind.

 

You could try yourself by editing the values in the CSS such as line-height, height, width, background-posistion and background-image.

 

Best 'O' Luck,

Dan.

Link to comment
Share on other sites

By the way; for the hover buttons I used your old buttons, not the wider ones. I think the one I did would look good anyway but If you want me to do the same but in the http://www.dbhosts.net/test/index.php style; I don't mind.

 

You could try yourself by editing the values in the CSS such as line-height, height, width, background-posistion and background-image.

 

Best 'O' Luck,

Dan.

 

Wow that’s an awesome response!

 

Thanks I really appreciate the luck with my hosting site, I’m trying to get it launched within the month

And thanks for the help!

 

I didn’t know CSS could do all of that... I will look more into CSS I know basics not much though.

 

I’m sure after I look it over I will be able to edit it the way I want it.

 

Again, Thanks for all the help and the time you spent making the above examples.

 

Also, If I need any more help with anything else can I contact you directly thru pm or some other way.. I am sure I will have get stumped some way down the road.

 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.