/    Sign up×
Community /Pin to ProfileBookmark

Menu that displays differently on select

Copy linkTweet thisAlerts:
Jan 29.2007

I usually design my menus in photoshop, cut them up and then write the code. I then take the code and place it in a file called menu.php

My menus are usually simple, neat and offer the website basic navigations such as HOME, Contact Us, About Us, etc etc.

Now, I am looking to make my menus a little more dynamic in terms of when selected, the image displays differently.

I would like to use the same menu throughout the site for simplicity’s sake. However, if I click on “HOME”, the home image would be the highlighted image. If I click on “Contact Us” page, the contact us page would load, all the navigation buttons would remain unhighlighted, but the “Contact Us’ image would be highlighted.

If I have lost anyone, I would try to explain it easier:

I have a menu/navigation with 4 tabs.
Tab 1: Home – index.php
Tab 2: Contact Us – contact.php
Tab 3: About Us – about.php
Tab 4: Services – services.php

Now, at default, the home page is index.php (obviously). So my menu, which is pulled from the command line: <?php include (“menu.php”); ?>.
My menu would display all 4 tabs, but since I am on the Home page, a different image would load for the HOME tab. Similarly if I go to Contact Us tab, the contact.php page would load and the menu would display, and only the Contact Us tab would be highlighted.

Anyone have any ideas how to accomplish this task but ONLY HAVE ONE MENU script, not an individual one for each page?

to post a comment
PHP

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@NotionCommotionJan 29.2007 — Create a rollover graphic which includes three or so tabs (i.e. current page, not current page, and hover). Assign this graphic to the background of your tabs using css. Use css to change position of background based on conditions (i.e. hover, active). Assign a unique class to each of your tabs. Have a little page specific css which positions the rollover graphic for the correct class to the appropriate position so the correct graphic is displayed.
Copy linkTweet thisAlerts:
@gc40authorJan 29.2007 — Ok Notion, that sounds like a solution, would you mind writting up a .css and and a basic .html for such an application? Even if you are using two tabs.

Names of the images:

tab1on.jpg, tab1off.jpg, tab1hover.jpg

tab2on.jpg, tab2off.jpg, tab2hover.jpg


All help would be greatly appreciated! Thanks Notion.
Copy linkTweet thisAlerts:
@NotionCommotionJan 29.2007 — The file to include:
[code=html]<div id="navigation">
<ul>
<li><a href="/stuff.html" accesskey="s" class="menu4">Other Stuff</a></li>
<li><a href="/links.html" accesskey="l" class="menu4">Other Sites</a></li>
<li><a href="/contact.html" accesskey="c" class="menu5">Contact</a></li>
</ul>
</div>[/code]


Your common page css.
[CODE]#navigation ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#navigation li {
float: left;
margin: 0px;
padding: 0px;
display: inline;
background: url(/i/rollover.gif) no-repeat left top;
border-bottom: 5px solid #777777;
}
#navigation a {
font: bold 13px Arial, Helvetica, sans-serif;
text-transform: uppercase;
color: #ffffff;
text-decoration: none;
display: block;
padding: 7px 0px 0px 30px;
/* use height: 30px; and width: 144px; for IE 4 and 5 */
height: 23px;
width: 114px;
}
#navigation a {
text-transform: uppercase;
}
#navigation a:hover {
background: url(/i/rollover.gif) 0px -40px;
}
#navigation a:active {
background: url(/i/rollover.gif) 0px -80px;
}[/CODE]

Your page specific css
[CODE]#navigation .menu2 {background: url(/i/rollover.gif) 0px -80px}[/CODE]
×

Success!

Help @gc40 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...