|
HTML - Spry Menu Bar - Close Submenu When Click.
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? Similar TutorialsHello everyone. I have a spry accordion menu in a table and as you well now when it is clicked you get a highlight around the edge of the spry object, i'm on a mac so mine is grey and when I look at it on my friends PC it is blue. Is there any way to simply get rid of this highlighting effect? Thanks Thecaia23 Overview User will visit the site, that has a default iframe on load that displays in on the page. The below div i'm using to null their ability to navigate the base page *excluding the iframe Code: <div id="popupMask0" class="popupMask" style="z-index: 2001; display: block; height: 600px; width: 100%; top: 0px; left: 0px;"> </div> So the user is looking at a page that has a user agreement in the iframe. if they click "NO", they are re-directed to a page that says they cannot view the site due to not agreeing to the terms page. If they click "YES", they are taken to a terms of use page, also contained in the iframe with the masked div over the main page. Once on the terms page, if they click "NO", they are re-directed to a page that says they cannot view the site due to not agreeing to the 2nd terms page. If they click "YES", the iframe disapears and the masked DIV disapears. The user will have the ability to click links and objects on the base page at this time. Goal Need to have a user agreement page, and term page display before allowing users to login to a site. This is the cleanest way that i can think of for the restrictions i need to work around. All viewers will be using IE, so no need to be cross-browser friendly. screen shots attached 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. I moved this thread to CSS. It is in the wrong place. http://www.htmlforums.com/css/t-spry...ie-117172.html Hi, 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 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? 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 Hello, I have a dialog box and in there I have a button that says New Service. When a user clicks on New Service, another dialog is shown where they the put the name of the service and after they click Create, I want that dialog box and the first one close as well. Here is my code, I can't figure it out. I want the #create-userDialog box to close after the user clicks on Create in #new-serviceDialog. HTML Code: <script>
$(function() {
$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "#create-userDialog" ).dialog({
autoOpen: false,
width: 600,
modal: true,
buttons: {
"OPEN": function() {
var bValid = true;
allFields.removeClass( "ui-state-error" );
},
CLOSE: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
$( "#create-user" )
.button()
.click(function() {
$( "#create-userDialog" ).dialog( "open" );
});
$( "#new-serviceDialog" ).dialog({
autoOpen: false,
width: 400,
modal: true,
buttons: {
"Create": function() {
var bValid = true;
onclick = $( this ).dialog( "close" );
allFields.removeClass( "ui-state-error" );
},
Close: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
$( "#new-service" )
.button()
.click(function() {
$( "#new-serviceDialog" ).dialog( "open" );
});
});
</script>
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; 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 am trying to get rid of the "You have to click to activate this function" mumbo jumbo for a site I am doing. I tried following these directions... http://www.adobe.com/devnet/activeco...devletter.html but am having a rough time getting it to work... here is my code. Code: <script type="text/javascript"> AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','900','height','140','src','GoodDock','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','GoodDock' ); //end AC code </script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="900" height="140"> <param name="movie" value="images/GoodDock.swf" /> <param name="quality" value="high" /> <embed src="images/GoodDock.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="900" height="140"></embed> </object></noscript> Hi there, Not sure if this is HTML or CSS - I've got a <ul> menu that I've set up and it's changing nicely in colour when you mouseover (using a:hover etc.) I've seen a few menus though where if you click on home, it loads home and that option stays a different colour to show you what page you're currently on.. any ideas? Im making a nav menu for my Wordpress page. I made it with PNG sprite and with some jquery hover effects. I deliberately made the menu with PNG sprites, because the menu is static, no new categories will be added to it so I figured I'll do it with png. What I want to do is to make the menu item stay in the hover state after the click - that way the user can see on what part of the website he currently is. Code: <ul id="navigation">
<li ><a class="aa" href="test1.html"></a></li>
<li ><a class="bb" href="test2.html"></a></li>
<li ><a class="cc" href="test3.html"></a></li>
<li ><a class="dd" href="test4.html"></a></li>
<li ><a class="ee" href="test5.html"></a></li>
<li ><a class="ff" href="test6.html"></a></li>
<li ><a class="gg" href="test7.html"></a></li>
</ul>
Code: #navigation li a { background-image:url(menu-a.png); display:block; }
.aa { background-position: 0px 0; height: 38px; width: 108px; margin-left: 16px; }
.bb { background-position: -108px 0; height: 38px; width: 110px; }
.cc { background-position: -218px 0; height: 38px; width: 116px; }
.dd { background-position: -334px 0; height: 38px; width: 158px;}
.ee { background-position: -492px 0; height: 38px; width: 104px; }
.ff { background-position: -595px 0; height: 38px; width: 141px;}
.gg { background-position: -736px 0; height: 38px; width: 78px; }
#navigation a .hover { background:url(menu-a.png) no-repeat; display: block; opacity: 0; position: relative; top: 0px; left: 0; height: 100%; width: 100%; }
#navigation a.aa .hover { background-position:0px -38px; width:108px; height:38px; }
#navigation a.bb .hover { background-position:-108px -38px; width:110px; height:38px; }
#navigation a.cc .hover { background-position:-218px -38px; width:116px; height:38px; }
#navigation a.dd .hover { background-position:-334px -38px; width:158px; height:38px; }
#navigation a.ee .hover { background-position:-492px -38px; width:104px; height:38px; }
#navigation a.ff .hover { background-position:-595px -38px; width:141px; height:38px; }
#navigation a.gg .hover { background-position:-736px -38px; width:78px; height:38px; }
This is as far as I've got. The menu works, hovers correctly etc. But how do I make the hover effect for "aa" stay active when the visitor lands on test1.html page, "bb" for test2.html etc.? Thanks! I am using Dreamweaver and when I publish my code, the Remote Start/Alarm Combos submenu doesn't have the black background border the .leftnav menu style has. I tried changing all styles to black background, but it is still transparent. Here's my code Part 1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <style type="text/css"> @charset "utf-8"; /* CSS Document */ body { background-color: #000000; background-image: url(http://i184.photobucket.com/albums/x...kground2.png); background-repeat: repeat-x; } .catHead { background-color:#0B161A; font-family:verdana,arial; font-color:#0B161A; font-size:16px; font-weight:bold; padding:8px; } .crumb { background-color:#0B161A;height:15px; font-family: verdana; color: #666; font-size: 10px; padding:4px; } .crumb a { font-family: verdana; color: #666; font-size: 10px; text-decoration:underline; } .crumb a:hover { font-family: verdana; color: #666; font-size: 10px; text-decoration:underline; } .crumb a:visited { font-family: verdana; color: #666; font-size: 10px; text-decoration:underline; } .crumb a:active { font-family: verdana; color: #666; font-size: 10px; text-decoration:underline; } .leftNav { FONT-SIZE: 10px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none; color:#FFFFFF; } .leftNav { background-color:#000000; border:2px solid #0B161A; padding:5px; margin-top:5px; } .leftNav a{ color:#ccc; display:block; width:165px; background-color:#0B161A; padding:4px; text-decoration:none; vertical-align:middle; margin-top:1px; margin-bottom:1px; } .leftNav a:visited{ color:#ccc; display:block; width:165px; background-color:#0B161A; padding:4px; text-decoration:none; vertical-align:middle; margin-top:1px; margin-bottom:1px; } .leftNav a:active{ color:#ccc; display:block; width:165px; background-color:#0B161A; padding:4px; text-decoration:none; vertical-align:middle; margin-top:1px; margin-bottom:1px; } .leftNav a:hover{ color:#FFFFFF; display:block; width:165px; padding:4px; background-color:#003333; text-decoration:none; vertical-align:middle; margin-top:1px; margin-bottom:1px; } li.catList a, li.catList a:active, li.catList a:visited{ display:block; font-size:14px; font-family:verdana,arial; color:ccc; height:25px; padding-left:20px; padding-top:8px; vertical-align:middle; } li.catList a:hover{ background-color:#333333; display:block; font-size:14px; font-family:verdana,arial; color:ccc; height:25px; padding-left:20px; padding-top:8px; text-decoration:none; vertical-align:middle; } .link, .link a:link, .link a:visited, .link a:active { font-family: Arial; font-size: 14px; font-weight: bold; color: #008080; text-decoration: none; } .link, .link a:hover { font-family: Arial; font-size: 14px; font-weight: bold; color: #ff0000; text-decoration: none; } .mainBdy { font-color:#fff; min-height:400px; color:#ccc; width:650px; overflow:hidden; } .phoneBox { font-family:verdana,arial; font-weight:bold; font-size:14px; color:ccc; } .small { font-family: verdana; color: #000000; font-size: 10px; } .smallw { font-family: verdana; color: #ffffff; font-size: 10px; } .smallw a { font-family: verdana; color: #ffffff; font-size: 10px; } .smallw a:active { font-family: verdana; color: #ffffff; font-size: 10px; } .smallw a:hover { font-family: verdana; color: #ffffff; font-size: 10px; } .smallw a:visited { font-family: verdana; color: #ffffff; font-size: 10px; } .style1 { font-weight: bold; font-size: 33px; font-family: Arial, Helvetica, sans-serif; color: #000000; } .style2 { font-family: arial, verdana, courier new; font-size: 12px; color: #FFFF00; } .style3 { color: #00000 } .style4{ color: #FFFF00; font-family: arial, verdana, courier new; font-size: 14px; font-weight: bold; } .style5 { font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 10px color: #000000; } .style6 { font-family: Arial, Geneva, Helvetica, sans-serif; font-size: 10px; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; color: #FFFFFF; text-decoration: none; } .style7 { font-family: Verdana, Arial, Courier new; font-size: 18px; font-weight: bold; color: #ffff00 } #add2cart { padding-top: 0px; } #viewcart { padding-top: 0px; } /* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */ /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */ /******************************************************************************* LAYOUT INFORMATION: describes box model, positioning, z-order *******************************************************************************/ /* The outermost container of the Menu Bar, a fixed width box with no margin or padding */ ul.MenuBarVertical { margin: 0; padding: 0; list-style-type: none; font-size: 100%; cursor: default; width: 8em; } /* 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 same fixed width as parent */ ul.MenuBarVertical li { margin: 0; padding: 0; list-style-type: none; font-size: 100%; position: relative; text-align: left; cursor: pointer; width: 8em; } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ ul.MenuBarVertical ul { margin: -5% 0 0 95%; padding: 0; list-style-type: none; font-size: 100%; position: absolute; z-index: 1020; cursor: default; width: 8.2em; left: -1000em; top: 0; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ ul.MenuBarVertical ul.MenuBarSubmenuVisible { left: 0; } /* Menu item containers are same fixed width as parent */ ul.MenuBarVertical ul li { width: 8.2em; } /******************************************************************************* DESIGN INFORMATION: describes color scheme, borders, fonts *******************************************************************************/ /* Outermost menu container has borders on all sides */ ul.MenuBarVertical { border: 0px solid #CCC; } /* Submenu containers have borders on all sides */ ul.MenuBarVertical ul { border: 0px solid #CCC; } /* Menu items are a light gray block with padding and no text decoration */ ul.MenuBarVertical a { color:#ccc; display:block; width:165px; background-color:#0B161A; padding:4px; text-decoration:none; vertical-align:middle; margin-top:1px; margin-bottom:1px; } /* Menu items that have mouse over or focus have a blue background and white text */ ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus { color:#FFFFFF; display:block; width:165px; padding:4px; background-color:#003333; text-decoration:none; vertical-align:middle; margin-top:1px; margin-bottom:1px; } /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */ ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible { background-color: #0B161A; color: #FFF; } /******************************************************************************* 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.MenuBarVertical 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.MenuBarVertical a.MenuBarItemSubmenuHover { background-image: url(SpryMenuBarRightHover.gif); background-repeat: no-repeat; background-position: 95% 50%; } /******************************************************************************* hey guyz...am new to this forum...good to be here.... i need some help or pointers on how to create a submenu using html and javascript and not css....can someone direct me to a simple example where there is only html and javascript and no css....am postin the code which needs a submenu....how should i create a submenu so that when the mouse is on the menu..it opens a submenu to the right...more like a vertical menu...i have googled but all i found is examples with css... plz help me out here ....thanx Hi I am doing a quick website on the cheap. So I decided to add a Spry Accordion for the menu set up. The issue I am finding is that when I click any of the menu items a boxed focus selection border appears around the whole menu, which looks bad in the design. Is there any way to get rid of this issue so when you use the menu this doesn't appear? Also, at present you have to have one of the menu items open as a selection. Is it possible to manipulate the code so that none of the menu elements are open to start? Thanks in advance 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 Hi guys, First of all, I'd like to apologize for my writing skills as I'm from a non english-speaking country and I moved to Australia not long ago. Anyway, I'm trying to help a friend developing a website and I'm having some trouble getting the page to look like what he wants. I am an absolute rookie in website development and I'm discovering Dreamweaver as I speak. I managed to understand a few concepts based on what I know in VBA in Excel and tried to use some templates I found on the net. The last part didn't go really well and I decided to get rid of what I tried to make my explanations as clear as possible. Basically, I have a drop down menu on the left side of the page that works quite well at the moment.Wwhat I want to do is : the user goes over the first link of the drop down menu (called "General for Sale" under the section "Buying") and when he clicks on it, he loads on the right side the content of another page called "generalforsale.html. All of this obviously without refreshing the whole page and with the option of clicking on another section from the drop down menu to load another page... And all of this knowing that I'd like one specific page to be displayed on the left when the user first arrives on the website that would then be replaced by a page, depending on what he selects from the drop down menu. I have honestly tried everything I found and could understand, unsuccessfully... I have attached a lighter version of what I'm trying to do in case one of you guys has the time to have a look. I completely understand if this is not the policy of the forum and therefor apologize in advance. Thanks for reading me and for your help :-) Sub i think this is an easy one..... i am using 2 identical spry cluster effects - but two links to two slides i have problem - the spry slide effect works fine for the first instance - but not for the second instance. what changes need to be made to the Cluster call to get it to work?!?! here is a snippet of my source code to reveal the problem.... ///////////////////////////////////////////////////////////////////////////////////////// <!-- WORDSFORMS --> <Div id="sec1" style="display: none;" class="sec1"><strong>Wordsforms</strong> <br> <a onClick="cluster.start();"> > <!-- open symbol --> </a> <div id="first_cluster" class="wordsforms" > <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce vel sem nec massa cursus interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis euismod eros consequat nibh. Pellentesque non purus. Nam lectus magna, faucibus vel, aliquet id, commodo vitae, elit. Maecenas sollicitudin, nibh iaculis bibendum consequat, odio erat volutpat ipsum, sed dignissim ligula mi in justo. Nam placerat. Nullam fringilla tortor. Quisque lacinia, mi non iaculis adipiscing, turpis lacus eleifend velit, dictum facilisis pede diam sagittis nulla. Nunc vestibulum elementum enim. Etiam lorem felis, faucibus sit amet, vulputate sed, lobortis et, nunc. Morbi vitae lectus. </p> </div> </div> <!-- ACTIVATE WORDSFORMS SPRY GROW/HIDE --> <script type="text/javascript"> var my_cluster = function(element) { Spry.Effect.Cluster.call(this, {toggle: true}); this.name = 'my_cluster'; var resize_hor = new Spry.Effect.Size(element, {width:0, height: 0, units:'px'}, {width:350, height: 10, units:'px'}, {duration: 1, toggle: true}); this.addNextEffect(resize_hor); var resize_ver = new Spry.Effect.Size(element, {width:350, height: 10, units:'px'}, {width:350, height: 230, units:'px'}, {duration: 1, toggle: true}); this.addNextEffect(resize_ver); } my_cluster.prototype = new Spry.Effect.Cluster(); my_cluster.prototype.constructor = my_cluster; var cluster = new my_cluster("first_cluster"); </script> <!-- GIRLSBOYS --> <div id="sec2" style="display: none;" class="sec2"><strong>GirlBoys</strong> <br> <a onClick="cluster.start();"> > <!-- open symbol --></a> <div id="second_cluster" class="girlsboys" > <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce vel sem nec massa cursus interdum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Duis euismod eros consequat nibh. Pellentesque non purus. Nam lectus magna, faucibus vel, aliquet id, commodo vitae, elit. Maecenas sollicitudin, nibh iaculis bibendum consequat, odio erat volutpat ipsum, sed dignissim ligula mi in justo. Nam placerat. Nullam fringilla tortor. Quisque lacinia, mi non iaculis adipiscing, turpis lacus eleifend velit, dictum facilisis pede diam sagittis nulla. Nunc vestibulum elementum enim. Etiam lorem felis, faucibus sit amet, vulputate sed, lobortis et, nunc. Morbi vitae lectus. </p> </div> </div> <!-- ACTIVATE WORDSFORMS SPRY GROW/HIDE --> <script type="text/javascript"> var my_cluster = function(element) { Spry.Effect.Cluster.call(this, {toggle: true}); this.name = 'my_cluster'; var resize_hor = new Spry.Effect.Size(element, {width:0, height: 0, units:'px'}, {width:350, height: 10, units:'px'}, {duration: 1, toggle: true}); this.addNextEffect(resize_hor); var resize_ver = new Spry.Effect.Size(element, {width:350, height: 10, units:'px'}, {width:350, height: 230, units:'px'}, {duration: 1, toggle: true}); this.addNextEffect(resize_ver); } my_cluster.prototype = new Spry.Effect.Cluster(); my_cluster.prototype.constructor = my_cluster; var cluster = new my_cluster("first_cluster"); </script> ///////////////////////////////////////////////////////////////////////////////////////// can somebody help????? ben www.d-e-p-i-c-t.com |
|||||||