PDA

View Full Version : JS menu


chrisx03
09-11-2009, 07:53 PM
im not sure where i would have to post this. I have a Js menu code in which i am trying to implement into a template. I have been able to call the drop menu into the template but i am stuck.I have the menu css file created and also i have called the menu js script. i know i missing something hence me being here. This menu is supposed to be able to drop down what i am trying to accomplish is to figure out where and how to add items on the drop down section.

This is the script for the menu
************************************************** ********
var menuEffects = new Class({
initialize: function(selector, options) {
this.options = Object.extend({
subElement: false,
subElementSelector: 'a'
}, options || {})
this.selector = selector;
this.currTimer = 500;
$ES(selector + ' li ul').each(function(el) {
el.setStyles({
'display': 'block'
});
normalHeight = el.offsetHeight;
el.setStyles({
'height': 0,
'overflow': 'hidden'
});
elParent = $(el.parentNode);

currentMenu = new Fx.Style(el, 'height');
elParent.addEvents({
'mouseover': function(submenu, myParent, targetValue) {
myParent.addClass('hover');
submenu.clearTimer();
submenu.custom(targetValue);
}.pass([currentMenu, elParent, normalHeight]),
'mouseout': function(submenu, myParent, targetValue) {
myParent.removeClass('hover');
submenu.clearTimer();
submenu.custom(targetValue);
}.pass([currentMenu, elParent, 0])
})
}.bind(this));
}
});
function processMenuEffects (){
var myMenus = new menuEffects('#myajaxmenu', {
subElement: true
});
}
window.onDomReady(processMenuEffects);
************************************************** ******
This is the menu css code
#ajaxmenu ul {
margin: 0;
padding: 0;
list-style: none;
}

#ajaxmenu ul li {
position: relative;
float: left;
width:129px;
display: block;
text-decoration: none;
text-align: center;
font-weight: normal;
background-image: url(file:///C|/Documents%20and%20Settings/Compaq_Administrator/My%20Documents/MODximgs/menu.png);
overflow: visible;
}

#ajaxmenu ul li ul {
position: absolute;
left: 0; /* Set 1px less than menu width */
top:28px;
line-height: 16px;

}
#ajaxmenu ul li a {
color: #062E4B;
font-weight: bold;
}



/* Styles for Menu Items */
#ajaxmenu ul li.firstcategory {

color: #062E4B;
font-weight: bold;
height: 28px;
line-height: 28px;
padding-right: 0px;
padding-left: 0px;
background-image: url(menu.png);
background-repeat: no-repeat;
background-position: 0px;
margin: 0px;

}
#ajaxmenu ul li.category {
color: #062E4B;
font-weight: bold;
height: 28px;
line-height: 28px;
padding-right: 0px;
padding-left: 0px;
background-image: url(menu.png);
background-repeat: no-repeat;
background-position: -129px;
margin: 0px;

}
#ajaxmenu ul li.lastcategory {
color: #062E4B;
font-weight: bold;
height: 28px;
line-height: 28px;
padding-right: 0px;
padding-left: 0px;
background-image: url(menu.png);
background-repeat: no-repeat;
background-position: -222px;
margin: 0px;

}


#ajaxmenu ul li.firstcategory:hover, #ajaxmenu ul li.firstcategory.over {
color: #fff;
background-image: url(menu_roll.png);
}

#ajaxmenu ul li.category:hover, #ajaxmenu ul li.category.over {
color: #fff;
background-image: url(menu_roll.png);
}
#ajaxmenu ul li.lastcategory:hover, #ajaxmenu ul li.lastcategory.over {
color: #fff;
background-image: url(menu_roll.png);
}

/* commented backslash \*/
* html ul li a {height:1%}
/* end hack */
#ajaxmenu li a {
text-decoration: none;
}

/* hovered lists */
#ajaxmenu li a, #ajaxmenu li.over a {
color: #fff;
width: 129px;
display: block;

}
#ajaxmenu li li a:hover, #ajaxmenu li.over li a:hover {
background-image: url(images/bullet_11x8_roll.gif) !important;
color: #fff;
background-repeat: no-repeat;
background-color: #ff9200;
background-position: left center;
text-indent: 8pt;
}

/* set dropdown */
#ajaxmenu li li a, #ajaxmenu li.over li a {
color: #ffffff;
background-image: url(images/bullet_11x8.gif) !important;
background-repeat: no-repeat !important;
text-align: left;
border-right: 1px solid #2f2f2f;
border-bottom: 1px solid #2f2f2f;
border-left: 1px solid #2f2f2f;
font-weight: normal;
width: 172px;
background-color: #000000;
background-position: left center;
text-indent: 8pt;
}
#ajaxmenu li ul li a {
padding-top: 2px;
padding-bottom: 2px;
padding-right: 5px;
padding-left: 5px;
} /* Sub Menu Styles */

#ajaxmenu li ul, #ajaxmenu li.over ul {
display: block;
} /* The pop */
#ajaxmenu {
margin-right: auto;
margin-left: auto;
width: 781px;
padding-left: 45px;

}

#myajaxmenu {
position: absolute;
top:1px;
left: 0px;
display: block;
z-index: 1000;
}
************************************************** *****
The template html calling the menu.js, the menu2.css file and the the template style.css 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>
<title>TEMPLATE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="menu2.css" rel="stylesheet" type="text/css" />
<script src="menu.js" type="text/javascript"></script>


<body>

</head>
<body>
<div id="container">
<div id="banner"> <img src="assets/templates/orangeblue/img/banner.jpg" alt="banner" title="banner" /> </div>

<div class="topnav">
<div id="navcontainer">
<div id="ajaxmenu">
<ul>
<li class="category" name="myajaxmenu">1</li>
<li class="category" name="myajaxmenu">1</li>
<li class="category" name="myajaxmenu">1</li>
<li class="category" name="myajaxmenu"><a href="../../../Desktop/MINE/bluenorange/index.html">1</li><!--forum-->
<li class="category" name="myajaxmenu"><a href="../../../Desktop/MINE/bluenorange/index.html">1</li>
</ul>
</div>

</div>
<div class="clear">&nbsp; </div>
</div>
<div id="sidebar">
<h1>Navigation</h1>
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/">Services</a></li>
<li><a href="http://www.free-css.com/">Neighborhood</a></li>
<li><a href="http://www.free-css.com/">Remote</a> </li>
<li><a href="http://www.free-css.com/">Bussiness</a> </li>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Contact us</a></li>
<li><a href="http://www.free-css.com/">About us</a></li>
</ul>
</div>
</div>
<p>&nbsp;</p>
<div id="content">
<h1>Template news:</h1>
<blockquote>.</blockquote>
<p>BLAH </p>
<p>BlAH</p>
<p>BLAH</p>
<h1>&nbsp;</h1>
</div>
<div id="footer"> <a href="">homepage</a> | <a href="">contact</a> | <a href="">Site Map</a> | &copy; 2007

</div>
</body>
</html>
************************************************** *****

So to reiterate i was able to call the menu into the template and place it where i want it but now i am trying to figure out where i can add the items into the drop down sections.yes i am a noob at all of this pleae be patient with me =) thanks for the help in advanced

Corrosive
09-12-2009, 06:54 AM
Please wrap code in code tags. Thanks

domedia
09-12-2009, 08:51 PM
So is this question specific to the JS file? Where did you get it, did you ask them maybe?

chrisx03
09-12-2009, 09:04 PM
So is this question specific to the JS file? Where did you get it, did you ask them maybe?
That is a good idea, thank you

domedia
09-12-2009, 09:05 PM
Alot of times there is some instructions as well on how to use it. Did you look for a readme file or similar?