Applying CSS/Javascript menu style to main menu module |
|
Trevor
|
I am trying to integrate a menu effect that I found on the jQuery website here
http://apycom.com/menus/1-white-smoke.html
I have done the following:
1. installed artisteer template and set to default
2. linked the javascript and css files in index.php included in the package and placed them in the root folder with the index.php page under /home/public_html/templates/mytemplate/
3. I tried setting the 'module class suffix' for the main menu module to 'menu' but that didn't work. So, I then tried renaming the ID's contained in the menu script to 'smoke' and changing the module class suffix to 'smoke' in case there was a conflict
It appears as though nothing happens
4. I even tried removing all code from template.css and just putting the menu.css code directly into template.css but that didn't work either
Here is the code to menu.css, which is included in the script I downloaded:
/* menu::base */
div#menu {
height:41px;
background:url(images/main-bg.png) repeat-x;
}
div#menu ul {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
div#menu ul.menu {
padding-left: 30px;
}
div#menu li {
position: relative;
z-index: 9;
margin: 0;
padding: 0 5px 0 0;
display: block;
float: left;
}
div#menu li:hover>ul {
left: -2px;
}
div#menu a {
position: relative;
z-index: 10;
height: 41px;
display: block;
float: left;
line-height: 41px;
text-decoration: none;
font: normal 12px Trebuchet MS;
}
div#menu a:hover, div#menu a:hover span { color: #fff; }
div#menu a:hover { color: rgb(218,219,222); }
div#menu li.current a {}
div#menu span {
display: block;
cursor: pointer;
background-repeat: no-repeat;
background-position: 95% 0;
}
div#menu ul ul a.parent span {
background-position:95% 8px;
background-image: url(images/item-pointer.gif);
}
div#menu ul ul a.parent:hover span {
background-image: url(images/item-pointer-mover.gif);
}
/* menu::level1 */
div#menu a {
padding: 0 10px 0 10px;
line-height: 30px;
color: #e5e5e5;
}
div#menu span {
margin-top: 5px;
color: #333;
}
div#menu ul a:hover span {
color: #333;
}
div#menu ul ul span {
color: rgb(169,169,169);
}
div#menu ul ul a:hover span {
color: rgb(218,219,222);
}
div#menu li { background: url(images/main-delimiter.png) 98% 4px no-repeat; }
div#menu li.last { background: none; }
/* menu::level2 */
div#menu ul ul li { background: none; }
div#menu ul ul {
position: absolute;
top: 38px;
left: -999em;
width: 163px;
padding: 5px 0 0 0;
background: rgb(45,45,45);
margin-top:1px;
}
div#menu ul ul a {
padding: 0 0 0 15px;
height: auto;
float: none;
display: block;
line-height: 24px;
color: rgb(169,169,169);
}
div#menu ul ul span {
margin-top: 0;
padding-right: 15px;
_padding-right: 20px;
color: rgb(169,169,169);
}
div#menu ul ul a:hover span {
color: #fff;
}
div#menu ul ul li.last { background: none; }
div#menu ul ul li {
width: 100%;
}
/* menu::level3 */
div#menu ul ul ul {
padding: 0;
margin: -38px 0 0 163px !important;
margin-left:172px;
}
/* colors */
div#menu ul ul ul { background: rgb(41,41,41); }
div#menu ul ul ul ul { background: rgb(38,38,38); }
div#menu ul ul ul ul { background: rgb(35,35,35); }
/* lava lamp */
div#menu li.back {
background: url(images/lava.png) no-repeat right -44px !important;
background-image: url(images/lava.gif);
width: 13px;
height: 44px;
z-index: 8;
position: absolute;
margin: -1px 0 0 -5px;
}
div#menu li.back .left {
background: url(images/lava.png) no-repeat top left !important;
background-image: url(images/lava.gif);
height: 44px;
margin-right: 8px;
}
If anyone has any idea what I might be doing wrong, this would be a HUGE help. I've tried everything that I know so maybe someone out there can help me?
Thanks in advance!!!
|
| |
|
|