Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: Chrome CSS Drop Down Menu Icon

  1. #1
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default 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?

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,925
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    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*/
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Thanks, but

    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?

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,925
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Coding

    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='progidXImageTransform.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%;

  6. #6
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Page Code

    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>

  7. #7
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Thanks

    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!

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,925
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Perdimia View Post
    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.
    Last edited by jscheuer1; 08-24-2011 at 04:35 AM. Reason: add: And code pasted in . . .
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Here it is

    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.

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,925
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 08-25-2011 at 03:55 PM. Reason: English Usage
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  11. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Perdimia (08-25-2011)

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •