Need a little help

[Dan White]

1) Script Title: Switch Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...switchmenu.htm

3) Describe problem:

Hi. This site was recommended to me by my web hoster, Market America. I am very much a newbie and have learned just enough about html to do some basic webpage building. I had a couple of basic questions about the Switch Menu. Here's the site I'm working on:

http://www.cuttingboardcatering.com/...eringMain.html

Here are my issues:
1) If you click on a button like Testimonial, the menu expands to the testimonial line item, which you have to click to get to that page. How can I edit Switch so that I go to the testimonial page directly when I click on the Testimonial button? You could say I'm using the wrong menu, but I need the expand feature for just the Menu item, which has appetizers, entrees and so on.

2) I would like to customize the buttons so they match the rest of the site colors, etc. What's the best place for me to learn the basics on doing this?

3) Is it possible to have the button change color after choosing it? For example, if the buttons are blue, and then I click on the Testimonial button, when I go to that page can the Testimonial button then be yellow? As it is now, I'm using the same html code on all pages. Maybe I need different code for each page, with the color changed to yellow for that page only??

Hope this makes some sense.

Thanks for any help. BTW this site is awesome!

dwhite

[thetestingsite]

1) If you click on a button like Testimonial, the menu expands to the testimonial line item, which you have to click to get to that page. How can I edit Switch so that I go to the testimonial page directly when I click on the Testimonial button? You could say I'm using the wrong menu, but I need the expand feature for just the Menu item, which has appetizers, entrees and so on.

Change the part in red in the following code:

<div class="menutitle" onclick="SwitchMenu('sub3')">Testimonials</div>

to this:

<div class="menutitle" onclick="window.location.href='http://www.cuttingboardcatering.com/NewCatTestimonial.html'">Testimonials</div>

2) I would like to customize the buttons so they match the rest of the site colors, etc. What's the best place for me to learn the basics on doing this?

View the search results generated by Google:
http://www.google.com/search?q=CSS+T...ient=firefox-a

and choose one of these sites to help you learn the basics of CSS.

3) Is it possible to have the button change color after choosing it? For example, if the buttons are blue, and then I click on the Testimonial button, when I go to that page can the Testimonial button then be yellow? As it is now, I'm using the same html code on all pages. Maybe I need different code for each page, with the color changed to yellow for that page only??

You could specify it in the css. An example, simply add this line to the style (css) in the head of the document:

.menutitle-active {
cursor:pointer;
margin-bottom: 5px;
background-color:yellow;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}

And add the part in red on the div that the current page is on (if that makes sense):

<div class="menutitle-active" onclick="SwitchMenu('sub1')">Site Menu</div>

That should be it. Hope this helps.

[Dan White]

[QUOTE=thetestingsite;87819]Change the part in red in the following code:

<div class="menutitle" onclick="SwitchMenu('sub3')">Testimonials</div>

to this:

<div class="menutitle" onclick="window.location.href='http://www.cuttingboardcatering.com/NewCatTestimonial.html">Testimonials</div>

Thanks. I tried the code above but now the button doesn't do anything. I noticed what looks like a stray apostrophe befire the http above, so I removed it. Either way, the button doesn't work now. You can click on the original link and see what I mean. Any suggestions?

Thanks,
dwhite

[thetestingsite]

I noticed what looks like a stray apostrophe befire the http above, so I removed it. Either way, the button doesn't work now. You can click on the original link and see what I mean. Any suggestions?

Sorry, but I made a typo in my original post. The url should be encased in single quotes like so:

<div class="menutitle" onclick="window.location.href='http://www.cuttingboardcatering.com/NewCatTestimonial.html'">Testimonials</div>

That is why it is not working.

Hope this helps

[Dan White]

You could specify it in the css. An example, simply add this line to the style (css) in the head of the document:

.menutitle-active {
cursor:pointer;
margin-bottom: 5px;
background-color:#yellow;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}

And add the part in red on the div that the current page is on (if that makes sense):

<div class="menutitle-active" onclick="SwitchMenu('sub1')">Site Menu</div>

That should be it. Hope this helps.

Well I got the first part about the apostrophes to work just fine. Thanks! But, the part above is giving me trouble. In the program I'm using, the code for the switch menu gets changed for ALL pages when I change it for one page. I'm not sure if this matters.

When I change the color from #ECECFF in the head to #yellow as you recommend, the color just goes white. I assume there is a code for yellow that I'd know more about if I read up on the basics.

However, I'm trying to understand the second part about adding -active to the div section. If I add this text to the switch html it will change for ALL the webpages that use that menu. Do I need to have separate switch html code for each page separately so that only the page I am on has the -active text? I assume this text will turn the button yellow, so if all the div sections on the page had it then they would all turn yellow? Does this make sense? If so, then I need to rename each switch html to something different for each page.

thanks again,
dwhite

[thetestingsite]

When I change the color from #ECECFF in the head to #yellow as you recommend, the color just goes white.

Ah yes, yet another typo. Sorry, but it is fixed now in the code I posted before. Also, the code is either "background-color: yellow" or "background-color: #FFFF00".

However, I'm trying to understand the second part about adding -active to the div section. If I add this text to the switch html it will change for ALL the webpages that use that menu. Do I need to have separate switch html code for each page separately so that only the page I am on has the -active text? I assume this text will turn the button yellow, so if all the div sections on the page had it then they would all turn yellow? Does this make sense? If so, then I need to rename each switch html to something different for each page.

That makes no sense. Are you editting the HTML code of the document (each page), or are you using templates, or something else? If you are editting the HTML code directly for each page, then you could choose which div tags to set the class to "menutitle-active" (which will change only that menu item to the background color of yellow).

Hope this helps.

[Dan White]

That makes no sense. Are you editting the HTML code of the document (each page), or are you using templates, or something else? If you are editting the HTML code directly for each page, then you could choose which div tags to set the class to "menutitle-active" (which will change only that menu item to the background color of yellow).

Hope this helps.

OK, the yellow works now. Thanks.

As far as the above, don't worry about it. I think I understand what I need to do. I'll work on it and see. However, when I put in the -active part and change the color to yellow in the head, and then insert -active in the div section for one button, the button does turn yellow, BUT I lose all formatting for the other buttons. They just revert to plain text. Does this make sense?

Thanks again,
dwhite

[thetestingsite]

Yes it does, looking at your source code, it appears that you have omitted the class .menutitle. This is why the other items are losing their formatting. In this part of your code:

<style type="text/css">
.menutitle-active{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}

.submenu{
margin-bottom: 0.5em;
}
</style>

It needs to be like this:

<style type="text/css">
.menutitle {
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}

.menutitle-active{
cursor:pointer;
margin-bottom: 5px;
background-color: #FFFF00; //make active menu item yellow.
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}

.submenu{
margin-bottom: 0.5em;
}
</style>

Then to make each page have a different active menu, place this in the HTML where your menu is:

(The about page)

<div id="masterdiv">

	<div class="menutitle-active" onclick="window.location.href='http://www.cuttingboardcatering.com/NewCateringAbout.html'">About Us</div>
	
	<div class="menutitle" onclick="SwitchMenu('sub2')">Menu</div>
	<span class="submenu" id="sub2">
		- <a href="http://www.cuttingboardcatering.com/NewCatAppetizer.html">Appetizers</a><br>
                                           - <a href="http://www.cuttingboardcatering.com/NewCatSalads.html">Salads</a><br>

                                           - <a href="http://www.cuttingboardcatering.com/NewCatEntrees.html">Entrees</a><br>
                                           - <a href="http://www.cuttingboardcatering.com/NewCatSides.html">Sides</a><br>
                                           - <a href="http://www.cuttingboardcatering.com/NewCatDesserts.html">Desserts</a>		
	</span>

	<div class="menutitle" onclick="window.location.href='http://www.cuttingboardcatering.com/NewCatTestimonial.html'">Testimonials</div>
	
	<div class="menutitle" onclick="window.location.href='http://www.cuttingboardcatering.com/NewCatContact.html'">Contact</div>

	<div class="menutitle" onclick="window.location.href='http://www.cuttingboardcatering.com/NewCatPlanning.html'">Planning</div>

                     <div class="menutitle" onclick="window.location.href='http://www.cuttingboardcatering.com/NewCateringMain.html'">Home</div>

</div>

(Testimonials Page)

<div id="masterdiv">

	<div class="menutitle" onclick="window.location.href='http://www.cuttingboardcatering.com/NewCateringAbout.html'">About Us</div>
	
	<div class="menutitle" onclick="SwitchMenu('sub2')">Menu</div>
	<span class="submenu" id="sub2">
		- <a href="http://www.cuttingboardcatering.com/NewCatAppetizer.html">Appetizers</a><br>
                                           - <a href="http://www.cuttingboardcatering.com/NewCatSalads.html">Salads</a><br>

                                           - <a href="http://www.cuttingboardcatering.com/NewCatEntrees.html">Entrees</a><br>
                                           - <a href="http://www.cuttingboardcatering.com/NewCatSides.html">Sides</a><br>
                                           - <a href="http://www.cuttingboardcatering.com/NewCatDesserts.html">Desserts</a>		
	</span>

	<div class="menutitle-active" onclick="window.location.href='http://www.cuttingboardcatering.com/NewCatTestimonial.html'">Testimonials</div>
	
	<div class="menutitle" onclick="window.location.href='http://www.cuttingboardcatering.com/NewCatContact.html'">Contact</div>

	<div class="menutitle" onclick="window.location.href='http://www.cuttingboardcatering.com/NewCatPlanning.html'">Planning</div>

                     <div class="menutitle" onclick="window.location.href='http://www.cuttingboardcatering.com/NewCateringMain.html'">Home</div>

</div>

Do you see the trend?

Hope this helps.

[Dan White]

Do you see the trend?

Hope this helps.

Yes, I understand exactly. I'll make the changes and hopefully that'll do it. I'll let you know if there are any other problems.

Thanks again so much. I'll owe you a fruit basket.

dwhite

[jolly_jonesy]

Hi,

Thanks for all the info, but maybe you could describe the best way to show which sub menu item is active? what is the best way to highlight the submenu item to show which page is active/open

thanks

Jolly