I’m experimenting with putting an HTML/CSS/Javascript based drop down menu in my website. I found a great library “ddmenu” on the web. I was able to hack the *.css file to get the menu mostly where I want it to be.
The submenu displays shifted toward the right. How can I get it to display shifted toward the left?
I don’t know much CSS and I am finding the ddmenu.css confusing.
All of the relevant files are pasted below
Thanks much in advance
Steve
My menu.html file
<!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=ISO-8859-1">
<title>Menu Experiment</title>
<style type="text/css">
.nav_user_menu
{
float: right;
color: black;
text-decoration: none;
font-weight:bold;
}
</style>
<link rel="StyleSheet" href="search_files/ddmenu.css" type="text/css">
<script language="JavaScript" "text="" javascript"="" src="search_files/ddmenu.js"></script>
</head>
<body>
<ul id="ddmenu">
<li>
<a href="#">ACME</a>
</li>
<li>
<a href="#">ABC</a>
<ul>
<li><a href="#">Add Staff</a></li>
<li><a href="#">Search Profiles Celeberties Yo</a></li>
<li>
<a href="#">Help</a>
<ul>
<li><a href="#">Personal HELP </a></li>
<li><a href="#">National HELP </a></li>
<li><a href="#">Global HELP</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
The ddmenu.css file:
/* ---------------------------------------------
Keyboard accessible dropdown menu
Author:Adriana Palazova
Version:22 February 2009
last rev.: 19 October 2009
gratitude to Matthew Carroll - http://carroll.org.uk/sandbox/suckerfish/bones2.html
and
Alan Gresley and Duncan Hill - http://css-class.com/articles/ursidae/
------------------------------------------------ */
#ddmenu {font: bold 10pt Arial,Helvetica;border: 2px solid gray;}
/*#ddmenu a:link {text-decoration:none}*/
/*#ddmenu a:visited {text-decoration:none}*/
#ddmenu a:hover, #ddmenu a:focus, #ddmenu a:active {text-decoration:underline}
/* --- TOP LEVEL MENU STYLES --- */
#ddmenu li{list-style-type:none;}
#ddmenu
{
float:left;
display:inline;
width:100%;
padding:0;
background:#fff0ca; /*#414141;*/
}
#ddmenu li
{
position:relative;
float:left;
/*border-right:1px solid /*#fff; */
background:#fff0ca;/*#414141; */
font-weight:bold
}
#ddmenu li a
{
display:block;
white-space: nowrap;
/*width:7em; */
padding:5px 0.7em 7px;
border: 1px solid gray;
border-top: 0px;
border-bottom:0px;
/*border-style:solid;
border-width:1px;*/
/*border-width:1px 1px 0;
border-style:solid; */
/*border-color:#3e8ebe #0b3965 #003 #3e8ebe;*/
/*color:#fff*/
}
/* --- SUB MENU ITEMS --- */
#ddmenu li li
{
border:0 none;
font-weight:normal;
z-index:20
} /* no width here because of IE */
#ddmenu li li a
{
/*width:11em; */
padding:5px 0.5em 7px;
border-width:1px
}
#ddmenu ul > li
{
display:block;
float:none;
text-align:left;
} /* for Opera */
/* --- SUB MENU FIRST LEVEL INITIAL POSITION --- */
#ddmenu ul
{
position:absolute;
left:-9999px;
top:100%;
/*width:12em; */
padding:0;
border:1px solid #003
}
/*for modern browsers:*/
#ddmenu li > ul
{
top:auto;
width:auto
}
/*see the conditional comments for IE7*/
/* --- SHOW FIRST LEVEL SUB MENU --- */
/*For ie6:*/
#ddmenu li.sfhover ul,
#ddmenu li a:active ul,
#ddmenu li.sffocusparent ul,
#ddmenu li a.sffocus ul {left:0}
/* for modern browsers + IE7:*/
#ddmenu li:hover > ul,
#ddmenu li.sfhover > ul,
#ddmenu li.sffocusparent > ul,
#ddmenu li a:active > ul,
#ddmenu li a:focus + ul,
#ddmenu li a.sffocus + ul {left:auto}
/* --- SUB MENU SECOND LEVEL and following levels UNHOVERED POSITION --- */
#ddmenu li:hover ul ul,
#ddmenu li:active ul ul,
#ddmenu a:focus ul ul,
#ddmenu li.sfhover ul ul,
#ddmenu a.sffocus ul ul,
#ddmenu li.sffocusparent ul ul,
#ddmenu li.sffocus ul ul {left:-9999px}
/* --- SHOW SECOND LEVEL SUB MENU --- */
/* For ie6: */
#ddmenu ul li a:hover ul, #ddmenu ul li.sfhover ul,
#ddmenu ul li a:active ul,
#ddmenu ul li.sffocusparent ul,
#ddmenu ul li.sffocus ul {margin-left:12em; top:-1px; left:1px}
/* for modern browsers + IE7: */
#ddmenu ul li:hover > ul,
#ddmenu ul li.sfhover > ul,
#ddmenu li li a.sffocus + ul,
#ddmenu li li.sffocus > ul {margin-left:12em; top:-1px; left:1px}
/* --- SUB LEVEL positions for JavaScript OFF - thanks http://css-class.com/articles/ursidae/ --- */
/* --- The focus position for submenu anchors --- */
#ddmenu.jsoff li li a:focus, #ddmenu.jsoff li li a:active { /* --- THE FOCUS POSITION FOR FIRST SUB MENU ANCHORS --- */
position:relative;
left:9999px;
top:-1px;
z-index:21;
}
#ddmenu.jsoff li li li a:focus, #ddmenu.jsoff li li li a:active { /* --- THE FOCUS POSITION FOR SECOND SUB MENU ANCHORS --- */
left:19999px;
margin-left:12em;
top:-2.9em;
}
/* --- The hovered position for submenu anchors when the anchor is in focus --- */
#ddmenu.jsoff li:hover li a:focus, #ddmenu.jsoff li:hover li a:active {
position:relative; left:auto; top:-1px; margin-left:0}
#ddmenu.jsoff li:hover a:focus + ul { /* --- THE POSITION OF FIRST LEVEL SUB MENU, WHEN THE PARENT IS FOCUSSED AND HOVERED --- */
margin-left:0px;
}
#ddmenu.jsoff li li a:focus + ul { /* --- THE POSITION OF SECOND LEVEL SUB MENU, WHEN THE PARENT IS FOCUSSED FOR JavaScript OFF --- */
top:-1px;
left:12em;
margin-left:10000px;
}
#ddmenu.jsoff li:hover li a:focus + ul { /* --- THE POSITION OF SECOND LEVEL SUB MENU, WHEN THE PARENT IS FOCUSSED AND HOVERED --- */
left:12em;
margin-left:1px;
}
/* --- BACKGROUND IMAGES OF PARENT ITEMS --- */
#ddmenu li a.mum {
BACKGROUND: url(../images/down.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
}
#ddmenu ul li a.mum
{
BACKGROUND: url(../images/right.gif);
}
/* --- LINK HOVER STYLES --- */
#ddmenu li a:link, #ddmenu li a:visited {background-color:transparent}
#ddmenu li a:hover, #ddmenu li:hover a, #ddmenu li a:focus, #ddmenu li a:active,
#ddmenu li.sfhover a, #ddmenu li a.sffocus, #ddmenu li.sffocusparent a {background-color:#fff0ca/*#135*/}/* top level background hover color */
#ddmenu li li a:link, #ddmenu li li a:visited {background-color:transparent}
#ddmenu ul li a:hover, #ddmenu ul li:hover a, #ddmenu ul li a:focus, #ddmenu ul li a:active,
#ddmenu ul li.sfhover a, #ddmenu ul li a.sffocus, #ddmenu ul li.sffocusparent a {background-color:blue;color:#fff0ca;}
#ddmenu li li li a:link, #ddmenu li li li a:visited {background-color:transparent}
#ddmenu li li li a:hover, #ddmenu li li li:hover a, #ddmenu li li li a:focus, #ddmenu li li li a:active,
#ddmenu li li li.sfhover a, #ddmenu li li li a.sffocus, #ddmenu li li li.sffocusparent a {background-color:blue;color:#fff0ca;} /*{background-color:#135}*/
/* <!--[if IE 7]> */
#ddmenu li > ul {top:100%}
#ddmenu a
{
background: url(../images/down.gif) no-repeat -95% -50%;
}
#ddmenu ul li:hover > ul, #ddmenu ul li.sfhover > ul,
#ddmenu li li a.sffocus + ul, #ddmenu ul li.sffocusparent > ul {left:0}
The ddmenu.js file:
var menuID = 'ddmenu';
/* --- gratitude to Matthew Carroll - http://carroll.org.uk/ - http://carroll.org.uk/sandbox/suckerfish/bones2.html
based on http://www.htmldog.com/articles/suckerfish/dropdowns/ --- */
function accessible_menus_ie() {
var sfEls = document.getElementById(menuID).getElementsByTagName('LI');
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? ' ': '') + 'sfhover';
this.parentNode.className+=(this.parentNode.className.length>0? ' ': '') + 'sfhover';
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp('( ?|^)sfhover\\b'), '');
this.parentNode.className=this.parentNode.className.replace(new RegExp('( ?|^)sfhover\\b'), '');
}
}
}
function accessible_menus() {
var ddMenu = document.getElementById(menuID);
ddMenu.className = ddMenu.className.replace(new RegExp('(^|\\s)jsoff(\\s|$)'), '');
var mcEls = document.getElementById(menuID).getElementsByTagName('A');
for (var i=0; i<mcEls.length; i++) {
mcEls[i].onfocus=function() {
this.className = this.className ? this.className + ' sffocus' : 'sffocus'; //a:focus
this.parentNode.className = this.parentNode.className ? this.parentNode.className + ' sffocusparent' : 'sffocusparent'; //li < a:focus
this.parentNode.parentNode.className = this.parentNode.parentNode.className ? this.parentNode.parentNode.className + ' sffocusparent' : 'sffocusparent'; //ul < li < a:focus
if(this.parentNode.parentNode.parentNode.nodeName == 'LI') { //li < ul < li < a:focus
this.parentNode.parentNode.parentNode.className = this.parentNode.parentNode.parentNode.className ? this.parentNode.parentNode.parentNode.className + ' sffocusparent' : 'sffocusparent'; //li < ul < li < a:focus
this.parentNode.parentNode.parentNode.parentNode.className = this.parentNode.parentNode.parentNode.parentNode.className ? this.parentNode.parentNode.parentNode.parentNode.className + ' sffocusparent' : 'sffocusparent'; //ul < li < ul < li < a:focus
if(this.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName == 'LI') { //li < ul < li < ul < li < a:focus
this.parentNode.parentNode.parentNode.parentNode.parentNode.className = this.parentNode.parentNode.parentNode.parentNode.parentNode.className ? this.parentNode.parentNode.parentNode.parentNode.parentNode.className + ' sffocusparent' : 'sffocusparent'; //li < ul < li < ul < li < a:focus
this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.className = this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.className ?this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.className + ' sffocusparent' : 'sffocusparent'; //ul < li < ul < li < ul < li < a:focus
}
}
}
mcEls[i].onblur = function() {
this.className = this.className.replace(new RegExp('(^|\\s)'+'sffocus'+'(\\s|$)'), '');
this.parentNode.className = this.parentNode.className.replace(new RegExp('(^|\\s)'+'sffocusparent'+'(\\s|$)'), '');
this.parentNode.parentNode.className = this.parentNode.parentNode.className.replace(new RegExp('(^|\\s)'+'sffocusparent'+'(\\s|$)'), '');
if(this.parentNode.parentNode.parentNode.nodeName == 'LI') {
this.parentNode.parentNode.parentNode.className = this.parentNode.parentNode.parentNode.className.replace(new RegExp('(^|\\s)'+'sffocusparent'+'(\\s|$)'), '');
this.parentNode.parentNode.parentNode.parentNode.className = this.parentNode.parentNode.parentNode.parentNode.className.replace(new RegExp('(^|\\s)'+'sffocusparent'+'(\\s|$)'), '');
if(this.parentNode.parentNode.parentNode.parentNode.parentNode.nodeName == 'LI') {
this.parentNode.parentNode.parentNode.parentNode.parentNode.className = this.parentNode.parentNode.parentNode.parentNode.parentNode.className.replace(new RegExp('(^|\\s)'+'sffocusparent'+'(\\s|$)'), '');
this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.className = this.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.className.replace(new RegExp('(^|\\s)'+'sffocusparent'+'(\\s|$)'), '');
}
}
}
}
}
// only ie needs the sfHover script. all need the accessibility script...
// thanks Brothercake - Generic onload - GO1.1 - http://www.brothercake.com/site/resources/scripts/onload/
if(typeof window.addEventListener != 'undefined') { //.. gecko, safari, konqueror and standard
window.addEventListener('load', accessible_menus, false);}
else if(typeof document.addEventListener != 'undefined') { //.. opera
document.addEventListener('load', accessible_menus, false);}
else if(typeof window.attachEvent != 'undefined') { //.. win/ie
window.attachEvent('onload', accessible_menus_ie);
window.attachEvent('onload', accessible_menus);}
//** remove this condition to degrade older browsers
else { //.. mac/ie5 and anything else that gets this far
if(typeof window.onload == 'function') { //if there's an existing onload function
var existing = window.onload; //store it
window.onload = function() { //add new onload handler
existing(); //call existing onload function
//call generic onload function
accessible_menus_ie();
accessible_menus();
};
} else {
window.onload = function() { //setup onload function
accessible_menus_ie();
accessible_menus();
};
}
}
The relevant CSS you want is this part of ddmenu.css:
In particular, you want to change the
margin-leftvalues to something negative in order to shift the second sub-menu to the left. (Right now, themargin-left:12em;bumps the submenus over to the right of the main menus.) However, I don’t know of a way offhand to easily make this work for dynamic-width submenus, so you’ll either have to set the width explicitly (as in the rule below), or detect it via Javascript and set the negative margin that way, or find someone who’s better at CSS than I am. 🙂For your particular example, 8em seemed to be more or less the correct width, so I did this:
Here’s a jsfiddle with the above changes made. (Looks like there’s still some issue with the hover styles/link colors on the submenus, but those were there in the original so I left it alone.)