Page 1 of 3 123 LastLast
Results 1 to 10 of 22

Thread: chrome dropdown menu dropdown indicator

  1. #1
    Join Date
    Mar 2013
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default chrome dropdown menu dropdown indicator

    Chrome CSS Drop Down Menu (v2.5)
    http://www.dynamicdrive.com/dynamici...rome/index.htm
    Win7 64-bit, IE9 and Firefox.

    The indicator down arrow appears at the far left of the menu, not to the right of the menu item as the sample htm displays. I am using the code and css as provided. What am I doing wrong?

    Code:
    <link rel="stylesheet" type="text/css" href="chrometheme/chromestyle.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>

    Code:
    <div class="chromestyle" id="chromemenu">
    	<ul>
    		<li><a href="index.php">Home</a></li>
    		<li><a href="gallery-new.php" "#" rel="dropmenu1">Gallery</a></li>
    		<li><a href="artist.php">The Artist</a></li>
    		<li><a href="history.php">History</a></li>
    		<li><a href="contact.php">Contact Me</a></li>
    		<li><a href="kudos.php">Kudos</a></li>
    		<li><a href="ordering-info.php">Ordering Info</a></li>
    		<li><a href="show-schedule.php">Show Schedule</a></li>
    		<li><a href="video-demos.php">Video Demos</a></li>
    		<li><a href="links.php">Links</a></li>
    	</ul>
    </div>
    Code:
    <!--1st drop down menu -->
    <div id="dropmenu1" class="dropmenudiv">
    	<a href="show_cat.php?catid=2">Jewelry Boxes</a>
    	<a href="show_cat.php?catid=3">Wall Art</a>
    	<a href="show_cat.php?catid=4">Other Boxes</a>
    	<a href="show_cat.php?catid=5">Furniture</a>
    </div>
    <script type="text/javascript">
    
    cssdropdown.startchrome("chromemenu")
    
    </script>  
    </body>
    </html>
    Last edited by berdman; 03-01-2013 at 08:34 PM. Reason: To clarify script being cited.

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,010
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    Not sure - we'd really need to see a sample of your page to see how you've set it up and if there's anything else on the page that is affecting things.

    Also, could you post a link to the script here on DD so we have an easy route to a direct comparison?
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Mar 2013
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the response. I love responses that offer no help, only questions. Obviously the responder has not experienced my described problem and thus has no clue how to fix it. But then why bother responding?

    My new website is being created on my laptop. I have no idea how to link to my work since my laptop is not a server. What else would help? I am using the code and CSS as given on the site. I have posted that code. How about the HTML?

    Code:
    <?php         
    	include('bc.php');         
    	$title = "Home";        
    	$bc = new Breadcrumb($title, 'dddd');         
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Bruce Erdman - Joiner of Fine Furniture</title>
    <Content-Type: text/html; charset=UTF-8></Content-Type:>
    <title>Bruce Erdman - Joiner of Fine Furniture - Home of Fine Wood Working, Lovingly Created From 
    Beautiful Wood  jewelry box Art furniture contemporary furniture modern furniture kuhl onyx kuhlonyx moated chess table&#x2122;  oval Tambour&#x2122;</title>
    <link href="new_ovaltambour.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="chrometheme/chromestyle.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 id="wrapper">
    	<div id="header">
        
        <div class="htaddress"> 
        	<?php include ("htaddress.php") ?>   
    	</div>
        <div id="topmenu">
          <?php include ("nav.php") ?>
          
        </div>
        <div id="headline">Bruce Erdman Joiner of Fine Furniture</div>
      </div>
      <div id="m_content">
      <div class="crumb"><?php $bc->dropBreadcrumbs($title); ?></div>  
      <div id="himage"><img src="images/inventory/2010-46-5.jpg" alt="Every drawer receives custom drawer pulls." width="640" height="480" />
    <div class="hcap">Every drawer receives custom drawer pulls.</div>
    </div>
      <div class="htext"><p> 
    	<strong> Home of Fine Furniture Making, Lovingly Created From Beautiful Wood</strong>
    </p>
    <p>
    	<i>Read  </i> <a href="restoredwoodshop/index.php" class="linkcolor" TARGET="_blank">	 My 
    		Story Of Restoration,  </a></i> an encore career in furniture making.
    
    	</p>
    	</div>
        
    </div>
    
      <div id="footer">
      	<?php include ("footer.php") ?>
      </div>
      
    </div>
    <!--1st drop down menu -->
    <div id="dropmenu1" class="dropmenudiv">
    	<a href="show_cat.php?catid=2">Jewelry Boxes</a>
    	<a href="show_cat.php?catid=3">Wall Art</a>
    	<a href="show_cat.php?catid=4">Other Boxes</a>
    	<a href="show_cat.php?catid=5">Furniture</a>
    </div>
    <script type="text/javascript">
    
    cssdropdown.startchrome("chromemenu")
    
    </script>  
    </body>
    </html>
    And nav.php

    Code:
    <div class="chromestyle" id="chromemenu">
    	<ul>
    		<li><a href="index.php">Home</a></li>
    		<li><a href="gallery-new.php" "#" rel="dropmenu1">Gallery</a></li>
    		<li><a href="artist.php">The Artist</a></li>
    		<li><a href="history.php">History</a></li>
    		<li><a href="contact.php">Contact Me</a></li>
    		<li><a href="kudos.php">Kudos</a></li>
    		<li><a href="ordering-info.php">Ordering Info</a></li>
    		<li><a href="show-schedule.php">Show Schedule</a></li>
    		<li><a href="video-demos.php">Video Demos</a></li>
    		<li><a href="links.php">Links</a></li>
    	</ul>
    </div>

  4. #4
    Join Date
    Mar 2013
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    And the CSS

    Code:
    .chromestyle{
    width: 99%;
    font-weight: bold;
    }
    
    .chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    }
    
    .chromestyle ul{
    border: 1px solid #BBB;
    width: 100%;
    background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
    padding: 4px 0;
    margin: 0;
    text-align: left; /*set value to "left", "center", or "right"*/
    font-size: 14px;
    }
    
    .chromestyle ul li{
    display: inline;
    }
    
    .chromestyle ul li a{
    color: #494949;
    padding: 4px 7px;
    margin: 0;
    text-decoration: none;
    border-right: 1px solid #DADADA;
    }
    
    .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*/
    }
    
    /* ######### Style for Drop Down Menu ######### */
    
    .dropmenudiv{
    position:absolute;
    top: 0;
    border: 1px solid #BBB; /*THEME CHANGE HERE*/
    border-bottom-width: 0;
    font:normal 12px Verdana;
    line-height:18px;
    z-index:100;
    background-color: white;
    width: 200px;
    visibility: hidden;
    }
    
    
    .dropmenudiv a{
    width: auto;
    display: block;
    text-indent: 3px;
    border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
    padding: 2px 0;
    text-decoration: none;
    font-weight: bold;
    color: black;
    }
    
    * html .dropmenudiv a{ /*IE only hack*/
    width: 100%;
    }
    
    .dropmenudiv a:hover{ /*THEME CHANGE HERE*/
    background-color: #F0F0F0;
    }
    Screenshot. Note that Gallery is the only menu item with a drop down and the arrow is on the left.

    Click image for larger version. 

Name:	screenshot_zps14e9cd6d.jpg 
Views:	143 
Size:	69.4 KB 
ID:	4954

  5. #5
    Join Date
    Mar 2013
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    And the .js file

    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)
    
    var cssdropdown={
    disappeardelay: 250, //set delay in miliseconds before menu disappears onmouseout
    dropdownindicator: '<img src="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)
    
    //No need to edit beyond here////////////////////////
    
    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
    
    }

  6. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,010
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    Thanks for the js code, however, it would be easiest if you provide a link to your page so we can see your individual setup.

    If you've copied the demo page exactly (and we can't say for sure because you haven't provided the link to the demo page as a base comparison) then presumably it would work as expected. However, as you're asking questions, and have identified an undesirable behaviour in Forefox and IE9, then it's very likely that either you've set it up incorrectly OR something else on the page is causing conflicts.

    Another thought though - Is the DD demo page showing the same undesirable behaviour? Please provide the demo page link so we can quickly go over there to check it out.

    I appreciate that we could take all of the code you've pasted (except the CSS file which is missing) and make our own versions of the web page, but that isnt really helping you when it its your page that is showing problems. It will just invite further confused back-and-forth questions and answers.

    If you'd like help, please post a link to your live web page (the one showing the strange behaviour) and provide a link to the script demo page here on DD for comparison.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  7. #7
    Join Date
    Mar 2013
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I explained all that and posted everything. I don't know why my posts are not all showing up. I can't link to my work because it is on my laptop for now.

  8. #8
    Join Date
    Mar 2013
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    P.S. The demo works fine on my computer even with my code.

  9. #9
    Join Date
    Mar 2013
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    HTML

    Code:
    <?php         
    	include('bc.php');         
    	$title = "Home";        
    	$bc = new Breadcrumb($title, 'dddd');         
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Bruce Erdman - Joiner of Fine Furniture</title>
    <Content-Type: text/html; charset=UTF-8></Content-Type:>
    <title>Bruce Erdman - Joiner of Fine Furniture - Home of Fine Wood Working, Lovingly Created From 
    Beautiful Wood  jewelry box Art furniture contemporary furniture modern furniture kuhl onyx kuhlonyx moated chess table&#x2122;  oval Tambour&#x2122;</title>
    <link href="new_ovaltambour.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="chrometheme/chromestyle.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 id="wrapper">
    	<div id="header">
        
        <div class="htaddress"> 
        	<?php include ("htaddress.php") ?>   
    	</div>
        <div id="topmenu">
          <?php include ("nav.php") ?>
          
        </div>
        <div id="headline">Bruce Erdman Joiner of Fine Furniture</div>
      </div>
      <div id="m_content">
      <div class="crumb"><?php $bc->dropBreadcrumbs($title); ?></div>  
      <div id="himage"><img src="images/inventory/2010-46-5.jpg" alt="Every drawer receives custom drawer pulls." width="640" height="480" />
    <div class="hcap">Every drawer receives custom drawer pulls.</div>
    </div>
      <div class="htext"><p> 
    	<strong> Home of Fine Furniture Making, Lovingly Created From Beautiful Wood</strong>
    </p>
    <p>
    	<i>Read  </i> <a href="restoredwoodshop/index.php" class="linkcolor" TARGET="_blank">	“ My 
    		Story Of Restoration, ” </a></i> an encore career in furniture making.
    
    	</p>
    	</div>
        
    </div>
    
      <div id="footer">
      	<?php include ("footer.php") ?>
      </div>
      
    </div>
    <!--1st drop down menu -->
    <div id="dropmenu1" class="dropmenudiv">
    	<a href="show_cat.php?catid=2">Jewelry Boxes</a>
    	<a href="show_cat.php?catid=3">Wall Art</a>
    	<a href="show_cat.php?catid=4">Other Boxes</a>
    	<a href="show_cat.php?catid=5">Furniture</a>
    </div>
    <script type="text/javascript">
    
    cssdropdown.startchrome("chromemenu")
    
    </script>  
    </body>
    </html>
    CSS

    Code:
    .chromestyle{
    width: 99%;
    font-weight: bold;
    }
    
    .chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    }
    
    .chromestyle ul{
    border: 1px solid #BBB;
    width: 100%;
    background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
    padding: 4px 0;
    margin: 0;
    text-align: left; /*set value to "left", "center", or "right"*/
    font-size: 14px;
    }
    
    .chromestyle ul li{
    display: inline;
    }
    
    .chromestyle ul li a{
    color: #494949;
    padding: 4px 7px;
    margin: 0;
    text-decoration: none;
    border-right: 1px solid #DADADA;
    }
    
    .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*/
    }
    
    /* ######### Style for Drop Down Menu ######### */
    
    .dropmenudiv{
    position:absolute;
    top: 0;
    border: 1px solid #BBB; /*THEME CHANGE HERE*/
    border-bottom-width: 0;
    font:normal 12px Verdana;
    line-height:18px;
    z-index:100;
    background-color: white;
    width: 200px;
    visibility: hidden;
    }
    
    
    .dropmenudiv a{
    width: auto;
    display: block;
    text-indent: 3px;
    border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
    padding: 2px 0;
    text-decoration: none;
    font-weight: bold;
    color: black;
    }
    
    * html .dropmenudiv a{ /*IE only hack*/
    width: 100%;
    }
    
    .dropmenudiv a:hover{ /*THEME CHANGE HERE*/
    background-color: #F0F0F0;
    }
    Screen shot

    Click image for larger version. 

Name:	screenshot_zps14e9cd6d.jpg 
Views:	140 
Size:	69.4 KB 
ID:	4955

  10. #10
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,010
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    Maybe some of your missing posts are in the moderation queue. I'll wait to see what extra information you've posted once those have been authorised as what you're saying may make more sense in full and complete context.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

Similar Threads

  1. Chrome CSS dropdown menu
    By perky in forum CSS
    Replies: 11
    Last Post: 07-31-2010, 09:20 PM
  2. Chrome CSS Dropdown Menu v 2.01
    By SomeDevil2804 in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 07-16-2008, 07:28 PM
  3. Help please, Chrome dropdown menu
    By level200 in forum Dynamic Drive scripts help
    Replies: 7
    Last Post: 12-13-2007, 02:29 PM
  4. DD CSS Chrome Dropdown Menu
    By immi007 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 06-30-2007, 09:40 PM
  5. Chrome CSS Dropdown menu
    By mk47funk in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 03-08-2006, 07:11 PM

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
  •