PDA

View Full Version : Resolved Need Help w/ CSS Multi-Level Menu script



plainlydressed
11-06-2008, 01:40 PM
I want to use a menu like the one shown on this page: http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/index.htm

I want to use the horizontal style with buttons that "drop"-out to the side, but I want to disable the ability to "click" on the base button, if that makes sense? I want to force the navigator to browse over the base button for the other options to drop out to the side.

I am currently using a similar menu on my website, but I can't figure out how to disable the "base" buttons for the menus that drop out to the sides. Alot of my customers are not very internet-savvy, so they are getting confused by clicking on the base button, instead of waiting to see the menu options drop out to the side.

Hopefully this makes sense to someone who can help me?
Thanks so much in advance. :)

Snookerman
11-06-2008, 01:58 PM
I think you just have to remove the link, i.e. the red part:

<li><a href="site">Base button name</a></li>
You might have to add an id value to that list item since the css might be for links inside the list items. So if the css looks like this, ad the blue part:

#menu li a, #buttonwithnolink{
color:green;
}
and:

<li id="buttonwithnolink">Base button name</li>

plainlydressed
11-06-2008, 03:06 PM
Thanks so much for the quick and helpful information. I have pasted my current menu-text down below. Are you able to tell me how to disable the "base" buttons in my current menu from the text below? Thanks again so very much. :)

CURRENT MENU :

var NoOffFirstLineMenus=9; // Number of first level items
var LowBgColor='white'; // Background color when mouse is not over
var LowSubBgColor='white'; // Background color when mouse is not over on subs
var HighBgColor='black'; // Background color when mouse is over
var HighSubBgColor='black'; // Background color when mouse is over on subs
var FontLowColor='darkblue'; // Font color when mouse is not over
var FontSubLowColor='black'; // Font color subs when mouse is not over
var FontHighColor='white'; // Font color when mouse is over
var FontSubHighColor='white'; // Font color subs when mouse is over
var BorderColor='darkblue'; // Border color
var BorderSubColor='black'; // Border color for subs
var BorderWidth=1; // Border width
var BorderBtwnElmnts=1; // Border between elements 1 or 0
var FontFamily="verdana,arial" // Font family menu items
var FontSize=9; // Font size menu items
var FontBold=1; // Bold menu items 1 or 0
var FontItalic=0; // Italic menu items 1 or 0
var MenuTextCentered='left'; // Item text position 'left', 'center' or 'right'
var MenuCentered='left'; // Menu horizontal position 'left', 'center' or 'right'
var MenuVerticalCentered='top'; // Menu vertical position 'top', 'middle','bottom' or static
var ChildOverlap=.2; // horizontal overlap child/ parent
var ChildVerticalOverlap=.2; // vertical overlap child/ parent
var StartTop=170; // Menu offset x coordinate
var StartLeft=20; // Menu offset y coordinate
var VerCorrect=0; // Multiple frames y correction
var HorCorrect=0; // Multiple frames x correction
var LeftPaddng=3; // Left padding
var TopPaddng=2; // Top padding
var FirstLineHorizontal=0; // SET TO 1 FOR HORIZONTAL MENU, 0 FOR VERTICAL
var MenuFramesVertical=1; // Frames in cols or rows 1 or 0
var DissapearDelay=1000; // delay before menu folds in
var TakeOverBgColor=1; // Menu frame takes over background color subitem frame
var FirstLineFrame='navig'; // Frame where first level appears
var SecLineFrame='space'; // Frame where sub levels appear
var DocTargetFrame='space'; // Frame where target documents appear
var TargetLoc=''; // span id for relative positioning
var HideTop=0; // Hide first level when loading new document 1 or 0
var MenuWrap=1; // enables/ disables menu wrap 1 or 0
var RightToLeft=0; // enables/ disables right to left unfold 1 or 0
var UnfoldsOnClick=0; // Level 1 unfolds onclick/ onmouseover
var WebMasterCheck=0; // menu tree checking on or off 1 or 0
var ShowArrow=1; // Uses arrow gifs when 1
var KeepHilite=1; // Keep selected path highligthed
var Arrws=['tri.gif',5,10,'tridown.gif',10,5,'trileft.gif',5,10]; // Arrow source, width and height

function BeforeStart(){return}
function AfterBuild(){return}
function BeforeFirstOpen(){return}
function AfterCloseAll(){return}

// Menu tree
// MenuX=new Array(Text to show, Link, background image (optional), number of sub elements, height, width)


Menu1=new Array("Home","http://www.mydomain.com/index.html","images/BG1drk.gif",0,40,150);

Menu2=new Array("Customer Service","blank.htm","",4);
Menu2_1=new Array("Contact US","contactfile.html","",0,40,180);
Menu2_2=new Array("Shipping/Ordering Information","shippingfile.html","",0);
Menu2_3=new Array("Printable Order Form","printorderform.html","",0);
Menu2_4=new Array("International Orders","International.html","",0);

Menu3=new Array("Headcoverings & Accessories","blank.htm","",3);
Menu3_1=new Array("Coverings & Kapps","coverings-kapps.html","",0,40,180);
Menu3_2=new Array("Bonnets","bonnets.html","",0);
Menu3_3=new Array("Veils & Accessories","veils-accessories.html","",0);

Menu4=new Array("Ladies Clothing","blank.htm","",5);
Menu4_1=new Array("Ladies Dresses","ladiesgirlsclothingfile.html","",0,40,180);
Menu4_2=new Array("Ladies & Girls Outerwear","ladiesouterwearfile.html","",0);
Menu4_3=new Array("Ladies Underclothing & Sleepware","underpinnings.html","",0);
Menu4_4=new Array("Ladies Aprons","aprons.html","",0);
Menu4_5=new Array("Send Your Own Fabric","sendfabricfile.html","",0);

Menu5=new Array("Mens & Boys Clothing","blank.htm","",2);
Menu5_1=new Array("Mens & Boys Clothing & Hats","mensclothinghatsfile.html","",0,40,180);
Menu5_2=new Array("Mens & Boys Outerwear","mensouterwear.html","",0);

Menu6=new Array("Girls Clothing","girlsclothing.html","",0);

Menu7=new Array("Customer Gallery & Comments","blank.htm","",8);
Menu7_1=new Array("Customer Gallery & Comments","galleryfile.html","",0,40,180);
Menu7_2=new Array("Amish School Play","amishplay.html","",0);
Menu7_3=new Array("Mennonite School Play","mennoniteplayfile.html","",0);
Menu7_4=new Array("Amish Outlaws","amishoutlaws.html","",0);
Menu7_5=new Array("Vogue Magazine","vogue.html","",0);
Menu7_6=new Array("Book Cover Art","bookcovers.html","",0);
Menu7_7=new Array("Media Publicity","media.html","",0);
Menu7_8=new Array("Hollywood Productions","hollywood.html","",0);

Snookerman
11-06-2008, 03:18 PM
If I understand correctly which your "base buttons" are then remove the red parts:

Menu1=new Array("Home","http://www.mydomain.com/index.html","images/BG1drk.gif",0,40,150);

Menu2=new Array("Customer Service","blank.htm","",4);
Menu2_1=new Array("Contact US","contactfile.html","",0,40,180);
Menu2_2=new Array("Shipping/Ordering Information","shippingfile.html","",0);
Menu2_3=new Array("Printable Order Form","printorderform.html","",0);
Menu2_4=new Array("International Orders","International.html","",0);

Menu3=new Array("Headcoverings & Accessories","blank.htm","",3);
Menu3_1=new Array("Coverings & Kapps","coverings-kapps.html","",0,40,180);
Menu3_2=new Array("Bonnets","bonnets.html","",0);
Menu3_3=new Array("Veils & Accessories","veils-accessories.html","",0);

Menu4=new Array("Ladies Clothing","blank.htm","",5);
Menu4_1=new Array("Ladies Dresses","ladiesgirlsclothingfile.html","",0,40,180);
Menu4_2=new Array("Ladies & Girls Outerwear","ladiesouterwearfile.html","",0);
Menu4_3=new Array("Ladies Underclothing & Sleepware","underpinnings.html","",0);
Menu4_4=new Array("Ladies Aprons","aprons.html","",0);
Menu4_5=new Array("Send Your Own Fabric","sendfabricfile.html","",0);

Menu5=new Array("Mens & Boys Clothing","blank.htm","",2);
Menu5_1=new Array("Mens & Boys Clothing & Hats","mensclothinghatsfile.html","",0,40,180);
Menu5_2=new Array("Mens & Boys Outerwear","mensouterwear.html","",0);

Menu6=new Array("Girls Clothing","girlsclothing.html","",0);

Menu7=new Array("Customer Gallery & Comments","blank.htm","",8);
Menu7_1=new Array("Customer Gallery & Comments","galleryfile.html","",0,40,180);
Menu7_2=new Array("Amish School Play","amishplay.html","",0);
Menu7_3=new Array("Mennonite School Play","mennoniteplayfile.html","",0);
Menu7_4=new Array("Amish Outlaws","amishoutlaws.html","",0);
Menu7_5=new Array("Vogue Magazine","vogue.html","",0);
Menu7_6=new Array("Book Cover Art","bookcovers.html","",0);
Menu7_7=new Array("Media Publicity","media.html","",0);
Menu7_8=new Array("Hollywood Productions","hollywood.html","",0);
You should only remove the link but leave the quotation marks there.

plainlydressed
11-06-2008, 03:37 PM
THANK YOU
THANK YOU
THANK YOU
THANK YOU
THANK YOU !!!!!!!!!! :):):)

That's exactly what I needed and solved the problem perfectly. You're my hero for the day. This "self-trained" website owner is very grateful. Bless you.

NOW........ I have learned that I need to use a non-java menu for better search engine optimization (CSS only, right?), so I have to figure out how to use that same method in a new menu, once I find the one I like. Ugg. But I know where to come back for help. You folks are amazing and I send my many many THANKS ~!!!! :)

Snookerman
11-06-2008, 03:45 PM
You are very welcome, I'm glad I could be of assistance. Make sure you go to your first message in this thread and click the edit button, then chose the Resolved prefix for the title, this will show others that a solution has been found and that the problem is solved. Good luck with your menu!