|
HTML - Spry Drop Down Menu Bar Problem..
Hello,
I'm working on website and I want to use spry drop down menu bar and I have trouble with it. This is how I want it to be like : When menu is active(rollover hover), it turns darker blue from light blue, and the submenu is same light blue when its not active, but it turns to pink when its active. By far, what I got is : When I roll over submenu, the color is not different from the menu unless the submenus has subsubmenu.... (its orange, but I'm gonna change to pink) like this: It is kinda hard to explain.. but I hope you understood. Thank you very much! --------- here is code : I didn't make any change for the upper part, and this is only part that I made changes. and I only changed colors. --------- } ul.MenuBarHorizontal a{ display: block; cursor: pointer; background-color: #33CCFF; padding: 0.5em 0.75em; color: #FFFFFF; text-decoration: none; } ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus{ background-color: #336699; color: #FFF; } ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible{ background-color: #336699; color: #FFF; } ul.MenuBarHorizontal a.MenuBarItemSubmenu{ background-image: url(SpryMenuBarDown.gif); background-repeat: no-repeat; background-position: 95% 50%; } ul.MenuBarHorizontal ul a.MenuBarItemSubmenu{ background-image: url(SpryMenuBarRight.gif); background-repeat: no-repeat; background-position: 95% 50%; } ul.MenuBarHorizontal a.MenuBarItemSubmenuHover{ background-image: url(SpryMenuBarDownHover.gif); background-repeat: no-repeat; background-position: 95% 50%; background-color: #336699; } ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover{ background-image: url(SpryMenuBarRightHover.gif); background-repeat: no-repeat; background-position: 95% 50%; background-color: #FF3366; Similar TutorialsHi, I have a problem with my spry menu and was wondering if there was a way of fixing it. Firstly it only occurs in IE Second, it fixes it self when I remove the IFRAME on the right (problems still there even if I use OBJECT instead of IFRAME) The problem is, the spry menu bar sub menus wont open out in IE whereas it does in FF. ANY help would be appreciated Hi. i have a option menu that come behind the adobe pdf embed. after open this link http://thewebcodes.com/index.php?id=2 when we go to the first menu option, it goes behind (this only appens in Internet Explorer) How could i solve it? Thank's in advance I'm a little stuck with my spry menu. I have been editing it and trying to find the best way to position it and also how to add a border to encompass and seperate all elements. Basically I was wondering if this was the beat way to code the menu or if I was way off Right now my code looks like this: On the page- Code: <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.MenuBarHorizontal{ position:absolute; left: 50%; top: 215px; min-width:690px; max-width:690px; margin-left:-345px }
.style1 {
color: #000000
}
</style>
</head>
<body id="page6">
<ul class="MenuBarHorizontal" id="MenuBar1" name="MenuBar1">
<li><a href="#" class="style1">xxxxxxx</a> </li>
<li><a href="#" class="MenuBarItemSubmenu style1">xxxxxx</a>
<ul>
<li><a href="#" class="style1">xxxxx</a></li>
<li><a href="#" class="style1">xxxxx</a></li>
<li><a href="#" class="style1">xxxxx</a></li>
<li><a href="#" class="style1">xxxxx</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu style1">xxxxxx</a>
<ul>
<li><a class="style1" href="#">xxxxxx</a>
<ul>
<li><a href="#" class="style1">xxxxxx</a></li>
<li><a href="#" class="style1">xxxxxx</a></li>
</ul>
</li>
<li><a href="#" class="style1">xxxxxx</a></li>
<li><a href="#" class="style1">xxxxxx</a></li>
</ul>
</li>
<li><a href="#" class="style1">xxxxxx</a></li>
<li><a href="#" class="style1">xxxxxx</a></li>
<li><a href="#" class="style1">xxxxxx</a></li>
<li><a href="#" class="style1">xxxxxx</a></li>
</ul>
In the Menu Bar CSS File - Code: @charset "UTF-8";
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/*******************************************************************************
LAYOUT INFORMATION: describes box model, positioning, z-order
*******************************************************************************/
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
margin: 100;
padding: 100;
list-style-type: none;
font-size: 100%;
cursor: default;
width: inherit;
background-image: url(../images/spry.png);
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
margin: 100;
padding: 100;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
background-image: url(images/spry.png);
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
top: 33px;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: 1px;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
width: 8.2em;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}
/*******************************************************************************
DESIGN INFORMATION: describes color scheme, borders, fonts
*******************************************************************************/
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
border: 2px solid #000000;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
text-decoration: none;
background-image: none;
background-color: #a9bebc;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
background-color: #789492;
color: #000000;
}
/*******************************************************************************
SUBMENU INDICATION: styles if there is a submenu under a given menu item
*******************************************************************************/
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
/*******************************************************************************
BROWSER HACKS: the hacks below should not be changed unless you are an expert
*******************************************************************************/
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
f\loat: left;
background: #789492;
}
}
Thanks in advance for any and all help. Good afternoon, I'm currently designing a site for a large exterior decorating company. I've had trouble, but nothing I couldn't work around. My graphic design skills are great, but my web coding is amateur at best. I've compiled a fixed-width site, it looks great in every browser, and in different resoultions. here's the kicker. (and I would have included code if the site were local on this computer, but it's on my laptop) My navigation is giving me major issues. Its set up to link to the site directory folder on my pc, the preview is real-time - what i'm trying to say is you can navigate the site from my pc, although it's not online. and the links work. I have one main-navigation, with drop-downs to a maximum of 2 sublevels (ie: spry vertical menu bar). I can navigate the main level to any of the sub-levels without issue. Code: /../index.html ---- to ---- /../products/siding/wood.html BUT when navigating back to any menu (or to a different sub-level in the same category, ie: siding/aluminum.html) for lack of a better explanation - the url won't drop the current directory. What I mean by this is Code: /../products/siding/wood.html ---- to ----- products/siding/aluminum.html redirects to products/siding/siding/aluminum.html So what i'm asking is if someone can assist me in fixing my page so it doesn't do this. I feel after writing this that my issue lies in the fact that I haven't specified index.html as my root directory. You would assume it would come intuitively for the page to drop the current directory, especially when you're specifying a page in a different level.. But apparently not. Also, i've explored it before but never found a decent answer: Is there any code that will allow me to embed the navigation to each page from a single file. Allowing easy changes to the navigation, simply by editing one file - the navigation? I moved this thread to CSS. It is in the wrong place. http://www.htmlforums.com/css/t-spry...ie-117172.html Hi, My website is www.bcsticketsnow.com. My spry menu at the top works perfectly in firefox, not so perfectly in IE. In IE the menu shows up in the top left corner when you mouseover. In firefox it correctly drops down below the parent item. I made it in dreamweaver. Any idea why it does that? My styles are at bcsticketsnow.com/styles.css my .js file is bcsticketsnow.com/SpryMenuBar.js the rest you can view the source on any page. Any help is much appreciated, thanks! Joel Hi all, I created a very simple Spry menubar using dreamweaver. It copied all the necessary CSS and JS into a folder for me. I have one question. whenever i selected (clicked) on an item(link) on the submenu. the submenu stays open while the page load in the frame. Is there a way to configure it so when i click on an item in the submenu, the submenu will close and the page will still load in the frame? I'm trying to center the drop menu x horizontal code from the following url: http://www.gosu.pl/MyGosuMenu/ The problem is every time I center it all browsers except Internet Explorer mess up when you try to resize the window. For example in Firefox if you center the drop down menu and hover your mouse over the drop down menu it will line up but then if resize the Firefox window and hover your mouse over the drop down menu again the drop down options will not line up. For centering I've tried centering with CSS and using the <center> tag and both ways cause this same problem. Any help with this would be appreciated. Thanks, Jeff i have this particular drop down menu in a wordpress PHP sidebar template, but i cant get it to execute once an option is selected. when i had this in another PHP page through a DW library item, it would execute just fine. here is the code... Code: <form name="guideform" id="guideform" action="#"> <select name="guidelinks" id="guidelinks" onChange="window.location=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value"> <option selected value="#">default</option> <option value="option 1 url">option 1</option> <option value="option 2 url">option 2</option> <option value="option 3 url">option 3</option> </select> </form> can someone tell me why this would work on one PHP page and not another? heres where i have the element in place on the page... http://flyerflies.com/blog also, another question...how can i adjust the width of the display pane once the menu is opened? in FF, it opens to show all of the contents, but in IE (surprise, surprise) it only opens to the same width as the default text display in the unopened drop down box. Hi, I was wondering if someone could help me... I made a drop down menu using fireworks for the site http://www.lakehillsca.org/ and the menu works perfectly in IE. But when viewing the site in firefox, the menu positioning isn't right. The menu uses javascript, but I'm pretty sure it isn't a javascript issue. Is there anyone out there that can figure this out??? Thanks for your time. -Chris This might belong in the CSS forum? I'm trying to link to the "Legislation" tab from the footer links. All of this content is on one page and i can't seem to link to it. I tried adding an anchor to Legislation but that didn't work. there must be a way. The page is built using Spry in Dreamweaver CS3. thanks for your help http://www.dynamitedave.com/rsc/index.shtml Id like to do a drop down menu similar to there's... is there any simple way of doing this?! Hi all, I can't for the life of me get the submenus to work. Here is my basic code and style sheet. How and where do I get a sub menu working on the navigation to display when you hover over it. I.E. hovering over 'News' displays sub menu of 'today', 'tomorrow'... Hey guys, I need help making a drop down menu. I know how to make a basic one, but this is what I need... I want to have 4 drop down menus, with about 4 choices in each one. Under them I need a 'Submit" button. Basically, I need it so that any combination of the 4 choices in the 4 menus will open a specific page. For instance, lets say in menu 1 I pick the word "cat". In menu 2, I pick the word "dog". In menu 3 I pick the word "car". In menu 4 I pick the word "tree". Once I click submit, a page with a picture of a cat, dog, tree and car would open up. (I would provide all the possible different pictures). So how would one do this? Any help is GREATLY appreciated, thanks! Hai everybody.. I want to create a html drop down menu. I created a menu using template toolkit, but i want to create this in html code.Caan anyone help. Pls find here what i done. { title = 'Enterprise Name' type = 'select' dropdown_field = arr_Ent_NameId (This is the array which contains all the data i.e enterprise name. name = 'ent_id' } How can i do this in html. In the select and value button , how can i use this array Hi All! I would like to make a drop down box with all the departments of my company. Basically the user would select a dept and without refreshing or opening a new page the information would appear below. I have seen this before using a database but is there a way to do it without? Hi, Basically i have an index page with two frame, a navigation frame for the top and a main frame for the information, i have a drop down menu in the navigation frame. But the problem is, the drop down menu cant all bee seen when it drops over the main frame. Does anyone know a solution to this problem, i tried using an Iframe instead of normal frames, but that leaves a big gap between the end of the drop down menu and the start of the information. I have also tried using the <div> tags this also didnt help, i was wondering if there is a way to set the order in which the frames are displayed,so the navigation frame is displayed over the main frame. Any help would be great. Thanks for your time. mmarab. Hi All, This is my first post so please be kind I am currently trying to create 3 drop down menus in a top frame going across the top of the page. This is my first time trying to do anything like this and have run into a few issues i cant get my head around nor find an answer on the net. The code i have so far is this: _______________________________________________________________ <HTML> <HEAD> <TITLE> Test</TITLE> <BODY> </BODY> <SCRIPT TYPE="text/javascript"> <!-- function dropdown(mySel) { var myWin, myVal; myVal = mySel.options[mySel.selectedIndex].value; if(myVal) { if(mySel.form.target)myWin = parent[mySel.form.target]; else myWin = window; if (! myWin) return true; myWin.location = myVal; } return false; } //--> </SCRIPT> </HEAD> <div align="center"> <table border="1" cellpadding="4" width=500> <FORM METHOD=POST onSubmit="return dropdown(this.gourl)" TARGET=MAIN > <SELECT NAME="gourl"> <OPTION VALUE="">Choose a Destination... <OPTION VALUE="C:\Users\Desktop\a.htm">User Manuals </SELECT> <INPUT TYPE=SUBMIT VALUE="Go"> </FORM> <FORM METHOD=POST onSubmit="return dropdown(this.gourl)" TARGET=MAIN > <SELECT NAME="gourl"> <OPTION VALUE="">Choose a Destination... <OPTION VALUE="C:\Users\Desktop\a.htm">User Manuals </SELECT> <INPUT TYPE=SUBMIT VALUE="Go"> </FORM> <FORM METHOD=POST onSubmit="return dropdown(this.gourl)" TARGET=MAIN > <SELECT NAME="gourl"> <OPTION VALUE="">Choose a Destination... <OPTION VALUE="C:\Users\Desktop\a.htm">User Manuals </SELECT> <INPUT TYPE=SUBMIT VALUE="Go"> </FORM> </HTML> _______________________________________________________________ 1) When selecting 'User Manuals' on the drop down box, it opens up a new window and directs me back to the home page? 2) i am unsure as to how you place the drop down boxes side by side aligned at the top of the page? Is anyone able to help me out here? Cheers in advance Hello im looking for a script for my website that offers the following I have an image link, that I want to rollover to another image (Of the text glowing) then have a drop down menu pop up below it that can have other menus drop down from that one.) Right now Im trying a Javascript that I found for free on the internet but i cant seem to get it working. http://javascript-array.com/scripts/...rop_down_menu/ But I cant get it to be a rollover image instead of a text box. and it doesnt support multiple drop downs like this one: http://javascript-array.com/scripts/..._down_menu/?sb plus they want you to pay for it, and im looking for a free solution. Any help appreciated, thanks. Hello All, I am new to coding and looking to self teach myself with the help of this forum so I can design my own web site. I am looking for the best solution for searching a database. The database will for example contain USA States and Cities with the final result being an item or thing etc. that the search criteria points to. Let's say for example I want to know where all the Dentists are in the State of Maryland. I found this example below and It creates the option to choose a state however how do you make it accept your choice once chosen and go to the next webpage for the next lookup or whatever you decide to have it do next. I guess what I am asking is how do you make a Search or Go button take you to your drop down search criteria. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=unicode"> <meta content="MSHTML 6.00.2900.3429" name="GENERATOR"></head> <body><select name="state" size="1"> <option value="NA" selected="">Select A State</option> <option value="Blank">--------------------</option> <option value="AL">Alabama</option> <option value="AK">Alaska</option> <option value="AZ">Arizona</option> <option value="AR">Arkansas</option> <option value="CA">California</option> </select> </body></html> Thanks for any assistance... I am sure there is a simple answer to this |
|||||||