Hi there, new to the forums and to MODx. Im currently trying to create a menu that uses rollover background images that change when the user rolls over the button.
After a lot of tweaking I have the menu now displaying the correct images to start with, but the image does not chage when I the mouse rolls over. I am thinking it could be a CSS problem but I had this menu working fine before I tried to migrate it to MODx.
This is what I have so far:
The Call:
[!Wayfinder?&startId=`0` &level=`1` &rowTpl=`rowTpl`!]
The rowTpl chunk:
<li class="nav[+wf.docid+] [+wf.classnames+]"> <a href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]> [+wf.linktext+]</a></li>
The CSS
.menu {
margin: 0;
padding-top: 10px;
padding-left: 12px;
list-style: none;
background: #fff;
height:30px;
}
.menu li {
padding: 0;
margin: 0;
height: 24px;
margin-right: 1em;
list-style: none;
background-repeat: no-repeat;
}
.menu li a, .menu li a:visited {
display: block;
text-decoration: none;
text-indent: -1000px;
height: 24px;
background-color: #FFF;
background-repeat: no-repeat;
}
.menu ul li {
display: inline;
}
.nav1 {background-image: url(http://localhost/modx/assets/templates/placenet/images/home2-.jpg); width: 45px;}
.nav1 a {background-image: url(http://localhost/modx/assets/templates/placenet/images/home1.jpg);}
.nav2 {background-image: url(http://localhost/modx/assets/templates/placenet/images/about2-.jpg); width: 78px;}
.nav2 a {background-image: url(http://localhost/modx/assets/templates/placenet/images/about2.jpg);}
.nav3 {background-image: url(http://localhost/modx/assets/templates/placenet/images/conf2-.jpg); width: 106px;}
.nav3a {background-image: url(http://localhost/modx/assets/templates/placenet/images/con2.jpg);}
ul.menu li a:hover {background: none;}
.menu li {float: left;}
.menu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
The generate menu HTML:
</div>
<div class="menu">
<ul><li class="nav1 active"> <a href="http://localhost/modx/" title="Home" > Home</a></li>
<li class="nav2 "> <a href="/modx/index.php?id=2" title="About" > About</a></li>
<li class="nav3 last"> <a href="/modx/index.php?id=3" title="Contact Us" > Contact Us</a></li>
</ul>
</div>
Pretty sure the problem must be in the CSS, but dont understand how it was working before putting it into MODx?
Any help appreciated!
