Chrome CSS Drop Down Menu Icon

Chrome CSS Drop Down Menu (v2.5)
http://www.dynamicdrive.com/dynamici...rome/index.htm

I am fairly new to all this CSS/Web Design, and having got this script to work how I want it, I was just wondering if there was anyway of getting the icon to change when it was rolled over.

Currently I am using a white icon and white text, and when rolled over the text turns navy.
I have a navy version of the icon, and was wondering if you could alter the script to load the navy icon over the white version when rolled over?

In the chromestyle.css file or whichever css file you're using for this, you may change the hover image here (around line 35):

Code:

---

.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}

---

Thanks for that. I now have the image coming up on roll over, and have even managed to position it in the right place, but it seems to be hidden behind the original image.

I have tried upping the z-index but has no effect.
Any ideas?

In a typical installation, that shouldn't happen as it's no different than the default rollover, which if you've seen the demo page, works fine as is.

So I'm thinking it may have to do with the implementation. If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

The demo menu doesn't change the icon on rollover, just the back ground.

I don't have the website up and running yet as I am just starting the site, but here is the relevant code.

JS
var cssdropdown={
disappeardelay: 250, //set delay in miliseconds before menu disappears onmouseout
dropdownindicator: '<img src="file:///E|/Docs/Church/My Web Sites/CBC/Laptop/down.gif" border="0"/>', //specify full HTML to add to end of each menu item with a drop down menu
enablereveal: [true, 5], //enable swipe effect? [true/false, steps (Number of animation steps. Integer between 1-20. Smaller=faster)]
enableiframeshim: 1, //enable "iframe shim" in IE5.5 to IE7? (1=yes, 0=no)


dropmenuobj: null, asscmenuitem: null, domsupport: document.all || document.getElementById, standardbody: null, iframeshimadded: false, revealtimers: {},

getposOffset:function(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
},

css:function(el, targetclass, action){
var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")
if (action=="check")
return needle.test(el.className)
else if (action=="remove")
el.className=el.className.replace(needle, "")
else if (action=="add" && !needle.test(el.className))
el.className+=" "+targetclass
},

showmenu:function(dropmenu, e){
if (this.enablereveal[0]){
if (!dropmenu._trueheight || dropmenu._trueheight<10)
dropmenu._trueheight=dropmenu.offsetHeight
clearTimeout(this.revealtimers[dropmenu.id])
dropmenu.style.height=dropmenu._curheight=0
dropmenu.style.overflow="hidden"
dropmenu.style.visibility="visible"
this.revealtimers[dropmenu.id]=setInterval(function(){cssdropdown.revealmenu(dropmenu)}, 10)
}
else{
dropmenu.style.visibility="visible"
}
this.css(this.asscmenuitem, "selected", "add")
},

revealmenu:function(dropmenu, dir){
var curH=dropmenu._curheight, maxH=dropmenu._trueheight, steps=this.enablereveal[1]
if (curH<maxH){
var newH=Math.min(curH, maxH)
dropmenu.style.height=newH+"px"
dropmenu._curheight= newH + Math.round((maxH-newH)/steps) + 1
}
else{ //if done revealing menu
dropmenu.style.height="auto"
dropmenu.style.overflow="hidden"
clearInterval(this.revealtimers[dropmenu.id])
}
},

clearbrowseredge:function(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=document.all && !window.opera? this.standardbody.scrollLeft+this.standardbody.clientWidth-15 : window.pageXOffset+window.innerWidth-15
var dropmenuW=this.dropmenuobj.offsetWidth
if (windowedge-this.dropmenuobj.x < dropmenuW) //move menu to the left?
edgeoffset=dropmenuW-obj.offsetWidth
}
else{
var topedge=document.all && !window.opera? this.standardbody.scrollTop : window.pageYOffset
var windowedge=document.all && !window.opera? this.standardbody.scrollTop+this.standardbody.clientHeight-15 : window.pageYOffset+window.innerHeight-18
var dropmenuH=this.dropmenuobj._trueheight
if (windowedge-this.dropmenuobj.y < dropmenuH){ //move up?
edgeoffset=dropmenuH+obj.offsetHeight
if ((this.dropmenuobj.y-topedge)<dropmenuH) //up no good either?
edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
},

dropit:function(obj, e, dropmenuID){
if (this.dropmenuobj!=null) //hide previous menu
this.hidemenu() //hide menu
this.clearhidemenu()
this.dropmenuobj=document.getElementById(dropmenuID) //reference drop down menu
this.asscmenuitem=obj //reference associated menu item
this.showmenu(this.dropmenuobj, e)
this.dropmenuobj.x=this.getposOffset(obj, "left")
this.dropmenuobj.y=this.getposOffset(obj, "top")
this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px"
this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px"
this.positionshim() //call iframe shim function
},

positionshim:function(){ //display iframe shim function
if (this.iframeshimadded){
if (this.dropmenuobj.style.visibility=="visible"){
this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px"
this.shimobject.style.height=this.dropmenuobj._trueheight+"px"
this.shimobject.style.left=parseInt(this.dropmenuobj.style.left)+"px"
this.shimobject.style.top=parseInt(this.dropmenuobj.style.top)+"px"
this.shimobject.style.display="block"
}
}
},

hideshim:function(){
if (this.iframeshimadded)
this.shimobject.style.display='none'
},

isContained:function(m, e){
var e=window.event || e
var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
if (c==m)
return true
else
return false
},

dynamichide:function(m, e){
if (!this.isContained(m, e)){
this.delayhidemenu()
}
},

delayhidemenu:function(){
this.delayhide=setTimeout("cssdropdown.hidemenu()", this.disappeardelay) //hide menu
},

hidemenu:function(){
this.css(this.asscmenuitem, "selected", "remove")
this.dropmenuobj.style.visibility='hidden'
this.dropmenuobj.style.left=this.dropmenuobj.style.top="-1000px"
this.hideshim()
},

clearhidemenu:function(){
if (this.delayhide!="undefined")
clearTimeout(this.delayhide)
},

addEvent:function(target, functionref, tasktype){
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false);
else if (target.attachEvent)
target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)});
},

startchrome:function(){
if (!this.domsupport)
return
this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
for (var ids=0; ids<arguments.length; ids++){
var menuitems=document.getElementById(arguments[ids]).getElementsByTagName("a")
for (var i=0; i<menuitems.length; i++){
if (menuitems[i].getAttribute("rel")){
var relvalue=menuitems[i].getAttribute("rel")
var asscdropdownmenu=document.getElementById(relvalue)
this.addEvent(asscdropdownmenu, function(){cssdropdown.clearhidemenu()}, "mouseover")
this.addEvent(asscdropdownmenu, function(e){cssdropdown.dynamichide(this, e)}, "mouseout")
this.addEvent(asscdropdownmenu, function(){cssdropdown.delayhidemenu()}, "click")
try{
menuitems[i].innerHTML=menuitems[i].innerHTML+" "+this.dropdownindicator
}catch(e){}
this.addEvent(menuitems[i], function(e){ //show drop down menu when main menu items are mouse over-ed
if (!cssdropdown.isContained(this, e)){
var evtobj=window.event || e
cssdropdown.dropit(this, evtobj, this.getAttribute("rel"))
}
}, "mouseover")
this.addEvent(menuitems[i], function(e){cssdropdown.dynamichide(this, e)}, "mouseout") //hide drop down menu when main menu items are mouse out
this.addEvent(menuitems[i], function(){cssdropdown.delayhidemenu()}, "click") //hide drop down menu when main menu items are clicked on
}
} //end inner for
} //end outer for
if (this.enableiframeshim && document.all && !window.XDomainRequest && !this.iframeshimadded){ //enable iframe shim in IE5.5 thru IE7?
document.write('<IFRAME id="iframeshim" src="about:blank" frameBorder="0" scrolling="no" style="left:0; top:0; position:absolute; display:none;z-index:90; background: transparent;"></IFRAME>')
this.shimobject=document.getElementById("iframeshim") //reference iframe object
this.shimobject.style.filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)'
this.iframeshimadded=true
}
} //end startchrome

}



CSS:
.chromestyle{
width: 100%;
}

.chromestyle:after{
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.chromestyle ul{
background:url(Logo%20wide1.png);
background-repeat:none;
width: inherit;
max-width: 1024px;
min-width: 469px;
height: 80px;
padding: 60px 118px;
margin: 0;
text-align: center; /*set value to "left", "center", or "right"*/
text-indent:2%;
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color:#FFFFFF;
padding: 4px 7px;
margin: 0;
text-decoration: none;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{
background:url(down%201.gif) center right no-repeat;
background-position:70px 13px;
color:#46454E;
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
font:normal 12px;
line-height:18px;
z-index:100;
background-color:#FFF;
width: 200px;
visibility: hidden;

}


.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: #F99440;
}

* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color:#F99440;
color:#FFFFFF;

}

.sidebar1 {
float: left;
width: 20%;
background:#FFFFFF;
padding-bottom: 10px;
}
.content {
padding: 10px;
width: 60%;
float: left;
margin: left;
font-family: "Lucida Calligraphy", "Comic Sans MS", cursive;
}

.sidebar2 {
float:left;
width:20%;
background:#FFFFFF;
padding-bottom: 10px;
}


.content ul, .content ol {
padding: 0 15px 15px 40px;
}

.footer {
padding: 10px 0;
background:#FFF;
text-align:center;
position: relative;
width: 100%;

Page:
<link href="Master Page.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="chromejs/chrome.js">

/***********************************************
* Chrome CSS Drop Down Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

</head>

<body>

<div class="container">
<div class="header">
<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="#" rel="dropmenu1">About Us</a></li>
<li><a href="">Services</a></li>
<li><a href="#" rel="dropmenu2">Activities</a></li>
<li><a href="#" rel="dropmenu3">Contact Us</a></li>
<li><a href="">Links</a></li>
</ul>
</div>

<!--About Us menu -->
<div id="dropmenu1" class="dropmenudiv" style="width: 115px;">
<a href="http://www.dynamicdrive.com/">Church History</a>
<a href="http://www.cssdrive.com">Our Minister</a>
</div>


<!--Activities menu -->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://www.cnn.com/">Community Groups</a>
</div>

<!--Contact Us menu -->
<div id="dropmenu3" class="dropmenudiv" style="width: 85px;">
<a href="http://www.dynamicdrive.com/">Finding Us</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>

<!-- end .header --></div>

Forgot to say thanks for the help so far. It is possibly either something really obvious (Duh!) or you simply can't do it.

But I am grateful that you are taking the time to help a simpleton like me!

Quote:

---

Originally Posted by Perdimia

The demo menu doesn't change the icon on rollover, just the back ground.

I don't have the website up and running yet as I am just starting the site, but here is the relevant code.

---

Please put up a live demo of the problem. It's much easier to diagnose that way. And code pasted into the forum might not be faithful to what you actually have.

I have managed to upload it:

http://www.ebenezerbaptistchurch.co.uk/test.htm

But it also appears that I am having trouble spacing the second icon, a standard center right and auto doesn't seem to be putting it the correct position, but I have place the icon on the first drop down menu so you can see how it is behind the first on roll over.

Again thanks for the help.

Quote:

---

We believe that as people we often get things wrong,

---

Well, yes everyone makes mistakes, we wouldn't be human otherwise.

Anyways, I misunderstood the question. And this isn't a typical installation. As far as I can tell you're not using the chrome images. I thought that was what you wanted to change, not the triangle.

Here's what I did that worked locally in a mock up of the page - In the css get rid of the highlighted:

Code:

---

.chromestyle ul li a:hover, .chromestyle ul li a.selected{
        background:url(down%201.gif) no-repeat;
        background-position:70px 11px;
        z-index:1500;
        color:#46454E;
}

---

Add some styles above it and below it so it looks like this:

Code:

---

.dropdownindicator {
        width: 9px;
        height: 5px;
        font-size: 5px;
        display: inline-block;
        background-image: url(down.gif);
        vertical-align: middle;
}
.chromestyle ul li a:hover, .chromestyle ul li a.selected {
        color:#46454E;
}
.chromestyle ul li a:hover .dropdownindicator, .chromestyle ul li a.selected .dropdownindicator {
        background-image: url(down%201.gif);
}

---

Now in the chrome.js file, edit this line:

Code:

---

dropdownindicator: '<img src="down.gif" border="0"/>', //specify full HTML to add to end of each menu item with a drop down menu

---

to:

Code:

---

dropdownindicator: '<span class="dropdownindicator"></span>', //specify full HTML to add to end of each menu item with a drop down menu

---

Now, two niceties you should add. For first time visitors and return visitors who have cleared their cache, the hover image will take a moment to load the first time. To fix that, add into the script the highlighted as shown:

Code:

---

//** Chrome Drop Down Menu- Author: Dynamic Drive (http://www.dynamicdrive.com)

//** Updated: July 14th 06' to v2.0
        //1) Ability to "left", "center", or "right" align the menu items easily, just by modifying the CSS property "text-align".
        //2) Added an optional "swipe down" transitional effect for revealing the drop down menus.
        //3) Support for multiple Chrome menus on the same page.

//** Updated: Nov 14th 06' to v2.01- added iframe shim technique

//** Updated: July 23rd, 08 to v2.4
        //1) Main menu items now remain "selected" (CSS class "selected" applied) when user moves mouse into corresponding drop down menu.
        //2) Adds ability to specify arbitrary HTML that gets added to the end of each menu item that carries a drop down menu (ie: a down arrow image).
        //3) All event handlers added to the menu are now unobstrusive, allowing you to define your own "onmouseover" or "onclick" events on the menu items.
        //4) Fixed elusive JS error in FF that sometimes occurs when mouse quickly moves between main menu items and drop down menus

//** Updated: Oct 29th, 08 to v2.5 (only .js file modified from v2.4)
        //1) Added ability to customize reveal animation speed (# of steps)
        //2) Menu now works in IE8 beta2 (a valid doctype at the top of the page is required)

;(function(){
        var im = new Image();
        im.src = 'down%201.gif';
})();

var cssdropdown={
disappeardelay: 250, //set delay in miliseconds before menu disappears onmouseout
dropdownindicator: '<span class="dropdownindicator"></span>', //specify full HTML to add to end of each menu item with a drop down menu
enablereveal: [true, 5], //enable swipe eff . . .

---

The other nicety is the down 1.gif image itself. It has some white pixels in it, but you're displaying it over an orange background, well perhaps not exactly orange, but you can see the color there, it's from the Logo wide1.png background image. In an image editor like Photoshop, Paint Shop, or The Gimp, change those white pixels so that they either blend in with the background, or are transparent.

One other completely unrelated thing - In the stylesheet it has:

Code:

---

body {
        font:Verdana, Geneva, sans-serif;
        background:#000000;
        margin: 0;
        padding: 0;
        color: #000;
}

---

That's black text on a black background. You can choose white text on a balck background (probably best here) or some other contrasting colors. For that use:

Code:

---

body {
        font:Verdana, Geneva, sans-serif;
        background:#fff;
        margin: 0;
        padding: 0;
        color: #000;
}

---

This is only important if one or more of the background images for other elements doesn't load and/or one or more of the other background colors for other elements gets lost somehow. But if that were to happen, you'd want folks to at least be able to read the page, right?

Also by removing the black there, you avoid a flash of black as the page loads in some browsers. White is better because it's the predominant color of the page once loaded.

That has all worked so please let me just say thank you for taking the time to help me out with this problem.
I am extremely grateful for your assistance.:)

Chrome drop down menu (another similar issue)
http://www.tmatelson.com/SHC/index.html

//1) Main menu items now remain "selected" (CSS class "selected" applied) when user moves mouse into corresponding drop down menu.

Finding that the Main Menu item doesn't remain "selected" if you scroll the dropdown menu items.

Quote:

---

Originally Posted by tmate

Chrome drop down menu (another similar issue)
http://www.tmatelson.com/SHC/index.html

//1) Main menu items now remain "selected" (CSS class "selected" applied) when user moves mouse into corresponding drop down menu.

Finding that the Main Menu item doesn't remain "selected" if you scroll the dropdown menu items.

---

If it's only similar, even if it's exactly the same, we prefer you start a new thread. And when you do, please try to be more specific about the issue. I'm just not getting it from the above quoted. What do you mean by "scroll the dropdown menu items"? Please explain that in your new thread. And please mention whether or not this is a browser specific issue.