14 replies [Last post]
mpj
Offline
Regular
Last seen: 17 years 29 weeks ago
Joined: 2005-01-25
Posts: 16
Points: 0

For OS Commerce

When you select a section from the left menu, that text selection gets .

How is this possible? Is it programming or CSS ?

mpj
Offline
Regular
Last seen: 17 years 29 weeks ago
Joined: 2005-01-25
Posts: 16
Points: 0

CSS dynamic menu - how is this done?

karinne
karinne's picture
Offline
Enthusiast
Aylmer, QC, Canada
Last seen: 15 years 8 weeks ago
Aylmer, QC, Canada
Timezone: GMT-5
Joined: 2004-01-14
Posts: 291
Points: 0

Re: CSS dynamic menu - how is this done?

mpj wrote:
When you select a section from the left menu, that text selection gets .

the selection gets what!??! :?

mpj
Offline
Regular
Last seen: 17 years 29 weeks ago
Joined: 2005-01-25
Posts: 16
Points: 0

Re: CSS dynamic menu - how is this done?

karinne wrote:
mpj wrote:
When you select a section from the left menu, that text selection gets .

the selection gets what!??! :?

gets bold

... i forgot the forum takes the same html code

karinne
karinne's picture
Offline
Enthusiast
Aylmer, QC, Canada
Last seen: 15 years 8 weeks ago
Aylmer, QC, Canada
Timezone: GMT-5
Joined: 2004-01-14
Posts: 291
Points: 0

CSS dynamic menu - how is this done?

hehe Laughing out loud no problem.

they just apply the bold to it

<img src="images/icon_folder_green.gif" border="0">&nbsp;&nbsp;<a href="http://www.oscommerce.info/kb/About_The_Project">About The Project</a>&nbsp;(5)<br><img src="images/icon_folder_yellow.gif" border="0">&nbsp;&nbsp;<a href="http://www.oscommerce.info/kb/osCommerce"><b>osCommerce</b></a><br>

you can either do that by applying the code manually on each page or use a server-side language like php or asp to apply a class (that adds bol to the links) to the link corresponding with the page clicked.

mpj
Offline
Regular
Last seen: 17 years 29 weeks ago
Joined: 2005-01-25
Posts: 16
Points: 0

CSS dynamic menu - how is this done?

hello karinne

thanks for the reply.

What I'm trying to ask is how to generate these CSS styles dynamically.

Currently for PHP, I use PHP include to include my menu section in each in everypage.

But if I want to high a particular section on the menu, I would have to make a new menu page with that section highlighted. That would defeat the purpose of having include files.

For example:

There is a left menu navigation

1. Products
2. Services
3. Contact

If the user navigates to the "Products section" then the menu would change

1. Products
2. Services
3. Contact

If the user navigates to the "Services section" then the menu would change

1. Products
2. Services
3. Contact

etc....

thanks!

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 45 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

CSS dynamic menu - how is this done?

There are a couple of ways to do this... the easiest IMHO is to assign the page a body id

/* Set current page menu highlight */
body#page2 a#page2nav,
body#page3 a#page3nav
{color: #f00;cursor:text;font-weight:bold;}

then in the html:
</head>
<body id="page2">
<a href="#" id="page2nav">Page 2</a>
<a href="#" id="page3nav">Page 3</a>

Of course you will need to make the appropriate changes to page2 page3 to fit your menus

mpj
Offline
Regular
Last seen: 17 years 29 weeks ago
Joined: 2005-01-25
Posts: 16
Points: 0

CSS dynamic menu - how is this done?

so I would have to call a variable to it?

For instance:

page 1

<a href="page1.php?=css1">go to page 1</a>

And then the body of page1.php would call (css1) as the variable:

<body id="<$variable>">
<a href="#" id="<$variable>">Page 2</a>
<a href="#" id="<$variable>">Page 3</a> 

but then css1 would be used for each variable thus output would be

<body id="css1">
<a href="#" id="css1">Page 2</a>
<a href="#" id="css1">Page 3</a> 

I'm missing something here Sad

My main goal is to use one inlcude menu file while CSS changes per page selected.

Something like this:

http://www.oscommerce.info/kb/osCommerce/Upgrading_osCommerce

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 45 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

CSS dynamic menu - how is this done?

Well I don't do PHP, but I do this with ASP all the time...

My menu is an include file.. and it just has the html for the menu items
<a href="#" id="page2nav">Page 2</a>
<a href="#" id="page3nav">Page 3</a>
and so on

The css from my earlier post does the styling based on the body id of the page for example:
<body id="page2">

In essence then... the menu is included into an ASP page.. the links for the menu look to the css a href id for their styling and the style comes from the body id of the page.

If you need or want an example I'll post one for you.
Hope that helps

SteveG
Offline
Regular
Last seen: 17 years 39 weeks ago
Joined: 2004-11-16
Posts: 37
Points: 0

CSS dynamic menu - how is this done?

Take a look here: http://photomatt.net/scripts/intellimenu

I think this is similar to what you are trying to achieve. And you should be able to adjust the PHP to suit your application.

Steve

karinne
karinne's picture
Offline
Enthusiast
Aylmer, QC, Canada
Last seen: 15 years 8 weeks ago
Aylmer, QC, Canada
Timezone: GMT-5
Joined: 2004-01-14
Posts: 291
Points: 0

CSS dynamic menu - how is this done?

i use php also to have that effect on both my sites.

here's how i have it set up on my www.karinnelegault.com site

my menu is in another file and it's actually a function... something like

function menu($page) { 
<div id="topnav">
<ul id="nav">
	<li><a href="/en/" <? if ($page == 'home') {?>class="homes"<? } else { ?>class="home"<? }?>>home</a></li>
	<li><a href="/en/services/" <? if ($page == 'services') {?>class="servicess"<? } else { ?>class="services"<? }?>>services</a></li>
	<li><a href="/en/portfolio/" <? if ($page == 'portfolio') {?>class="portfolios"<? } else { ?>class="portfolio"<? }?>>portfolio</a></li>
	<li><a href="/en/contact/" <? if ($page == 'contact') {?>class="contacts"<? } else { ?>class="contact"<? }?>>contact</a></li>
</ul>
</div>
 }

then on each page i call up the function and give it a variable, like

require("core.php");
head('home');

then in in my css i have

.....

#nav a.home {
	background-color: #369;
}

#nav a.services {
	background-color: #f63;
}

#nav a.portfolio {
	background-color: #c33;
}

#nav a.contact {
	background-color: #393;
}

#nav a:hover {
	border: 1px solid #fff;
}
#nav a.homes {
	background-color: #369;
	border: 1px solid #fff;
}

#nav a.servicess {
	background-color: #f63;
	border: 1px solid #fff;
}

#nav a.portfolios {
	background-color: #c33;
	border: 1px solid #fff;
}

#nav a.contacts {
	background-color: #393;
	border: 1px solid #fff;
}

hth

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 45 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

CSS dynamic menu - how is this done?

I guess I'm gonna have to start learning PHP... but that seems like a lot of work to me?
Here's what I do with an include file in ASP
I'm including everything in line here which it wouldn't normally be

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Menu</title>
<style type="text/css">
<!--
body {color:#333; background:#999; 
 font-family:tahoma, arial, hevetica, sans-serif;
 font-size:76%;}

/* Set all elements to 0 padding margin and border */
* {padding:0;margin:0;border:0;}

/* Set current page menu highlight */
body#home a#homenav,
body#contact a#connav,
body#about a#aboutnav,
body#products a#prodnav
{color: #f00;cursor:text;}

#miniflex {float:left; width:100%;margin:0;}

#miniflex li {float:left;
 margin:0; padding:0;
 display:inline;list-style:none;}
	
#miniflex a:link, #miniflex a:visited {float:left;
 font-size:85%; line-height:20px;
 font-weight:bold; margin:0 20px 0 20px;
 text-decoration:none; color:#fff;}

#miniflex a.active:link, #miniflex a.active:visited, #miniflex a:hover {color:#f00;}
-->
</style>
</head>

Now the html for the page

<body id="home">
<!-- this is where the include file would go, but I'm listing the actual code from the include file instead -->

<ul id="miniflex">
 <li><a href="#" id="homenav">Home</a></li>
 <li><a href="#" id="connav">Contact</a></li>
 <li><a href="#" id="aboutnav">About</a></li>
 <li><a href="#" id="prodnav">Products</a></li>
</ul>
</body>
</html>

This should show 4 menu items; Home is in red and the others in white.
Now change the body id to "about" and you'll see that Home is now white and About is red

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 24 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

CSS dynamic menu - how is this done?

I feel like I must have misunderstood the question. On the off-chance that I haven't, I'll offer a little thingy-bob of my own.

Consider this included file snippet;

 
<ul> 
  <li id="home"><a href="../guideto/">Home</a></li> 
  <li id="aboutus"><a href="../about/index.shtml">About Gary's   
       Guide</a></li> 
  <li id="geek"><a href="../geek/">Geek stuff</a></li> 
  <li id="contact"><a href="../contact/">Contact us</a></li> 
</ul>
Notice that each list item has an id corresponding to the target page. Each page will have a single set of style rules. For example, the Geek stuff page will have;
 
#geek { 
    font-weight: bold; 
    color: red; 
    border: 1px dotted gray; 
    }


A favorite ruleset of mine is;
 
#geek { 
    display: none; 
    }
which removes the self-referential link from the menu.

If that's not applicable to this thread, well, maybe someone else can use it.
[edit]I really should have included a hierarchal/breadcrumb example;
#osCommerce, #catalogArea, #boxes {
    font-weight: bold;
    }
Each page would have its own unique hierarchy of ids.[/edit]

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

mpj
Offline
Regular
Last seen: 17 years 29 weeks ago
Joined: 2005-01-25
Posts: 16
Points: 0

CSS dynamic menu - how is this done?

Wow ... this is awesome!

I'll try out the codes later and give everyone an update!

Thanks for your help and reply.

- mp

mpj
Offline
Regular
Last seen: 17 years 29 weeks ago
Joined: 2005-01-25
Posts: 16
Points: 0

CSS dynamic menu - how is this done?

SteveG wrote:
Take a look here: http://photomatt.net/scripts/intellimenu

I think this is similar to what you are trying to achieve. And you should be able to adjust the PHP to suit your application.

Steve

this script worked great.

I was having some problems with the other examples.

thanks everyone for their generous inputs