Results 1 to 3 of 3

Thread: DD CSS Chrome Dropdown Menu

  1. #1
    Join Date
    Jun 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default DD CSS Chrome Dropdown Menu

    DD CSS Chrome Drop Down Menu

    http://www.dynamicdrive.com/dynamici...rome/index.htm

    I would like to add the below scrollbar to the code below but its not working... The only place I placed the scrollbar code was on the top of the CSS script(i.e in the beginning) but its not working. So how can I use the below scroll script to create the scrollbar on my webpage. I've tried putting the code in html but its not working. I haven't uploaded the webpage yet but I don't think its needed.

    ----------------------------------------
    <!--
    BODY
    {
    direction:;
    background-attachment:fixed;
    scrollbar-arrow-color: FFFFFF;
    scrollbar-track-color: EEEEEE;
    scrollbar-face-color: 888888;
    scrollbar-highlight-color: FFFFFF;
    scrollbar-3dlight-color: BBBBBB;
    scrollbar-darkshadow-color: 000000;
    scrollbar-shadow-color: FFFFFF;
    }
    -->

    .chromestyle{
    width: 99&#37;;
    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: center; /*set value to "left", "center", or "right"*/
    }

    .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{
    background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
    }

    .chromestyle ul li a[rel]:after{ /*HTML to indicate drop down link*/
    content: " v";
    /*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
    }


    /* ######### 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;
    filter: progidXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
    }


    .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;
    }

    --------------------------------
    Last edited by immi007; 06-30-2007 at 08:20 PM.

  2. #2
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    In the CSS, get rid of the parts in red below:

    Code:
    <!--
    BODY
    {
    direction:;
    background-attachment:fixed;
    scrollbar-arrow-color: FFFFFF;
    scrollbar-track-color: EEEEEE;
    scrollbar-face-color: 888888;
    scrollbar-highlight-color: FFFFFF;
    scrollbar-3dlight-color: BBBBBB;
    scrollbar-darkshadow-color: 000000;
    scrollbar-shadow-color: FFFFFF;
    }
    -->
    
    .chromestyle{
    width: 99&#37;;
    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: center; /*set value to "left", "center", or "right"*/
    }
    
    .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{
    background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
    }
    
    .chromestyle ul li a[rel]:after{ /*HTML to indicate drop down link*/
    content: " v";
    /*content: " " url(downimage.gif); /*uncomment this line to use an image instead*/
    }
    
    
    /* ######### 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;
    filter: progidXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
    }
    
    
    .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;
    }
    That should get it to work in IE only.
    Hope this helps.
    "Computer games don't affect kids; I mean if Pac-Man affected us as kids, we'd all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music." - Kristian Wilson, Nintendo, Inc, 1989
    TheUnlimitedHost | The Testing Site | Southern Utah Web Hosting and Design

  3. #3
    Join Date
    Sep 2006
    Location
    St. George, UT
    Posts
    2,769
    Thanks
    3
    Thanked 157 Times in 155 Posts

    Default

    If that still doesn't work, then try the following (source taken from demo.htm):

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <title>Chrome CSS Drop Down Menu</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="chrometheme/chromestyle.css" />
    
    <style type="text/css">
    <!--
    BODY
    {
    background-attachment:fixed;
    scrollbar-arrow-color: FFFFFF;
    scrollbar-track-color: EEEEEE;
    scrollbar-face-color: 888888;
    scrollbar-highlight-color: FFFFFF;
    scrollbar-3dlight-color: BBBBBB;
    scrollbar-darkshadow-color: 000000;
    scrollbar-shadow-color: FFFFFF;
    }
    -->
    </style>
    
    <script type="text/javascript" src="chromejs/chrome.js">
    
    /***********************************************
    * Chrome CSS Drop Down Menu- &#169; 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="chromestyle" id="chromemenu">
    <ul>
    <li><a href="http://www.dynamicdrive.com">Home</a></li>
    <li><a href="#" rel="dropmenu1">Resources</a></li>
    <li><a href="#" rel="dropmenu2">News</a></li>
    <li><a href="#" rel="dropmenu3">Search</a></li>	
    </ul>
    </div>
    
    <!--1st drop down menu -->                                                   
    <div id="dropmenu1" class="dropmenudiv">
    <a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
    
    <a href="http://www.cssdrive.com">CSS Drive</a>
    <a href="http://www.javascriptkit.com">JavaScript Kit</a>
    <a href="http://www.codingforums.com">Coding Forums</a>
    <a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
    </div>
    
    
    <!--2nd drop down menu -->                                                
    <div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
    <a href="http://www.cnn.com/">CNN</a>
    <a href="http://www.msnbc.com">MSNBC</a>
    
    <a href="http://news.bbc.co.uk">BBC News</a>
    </div>
    
    <!--3rd drop down menu -->                                                   
    <div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
    <a href="http://www.google.com/">Google</a>
    <a href="http://www.yahoo.com">Yahoo</a>
    <a href="http://www.msn.com">MSN</a>
    </div>
    
    
    <script type="text/javascript">
    
    cssdropdown.startchrome("chromemenu")
    
    </script>
    
    <form>
    <p>Sample form to demonstrate hover over windowed objects in IE5.5 to IE6 via iframe shim technique. IE7+ not affected by issue.</p>
    <select style="width: 80&#37;">
    <option>whatever</option>
    <option>whatever</option>
    <option>whatever</option>
    </select>
    </form>
    
    <p><b>Note:</b> To see how the menu looks with an alternate theme, just change the code:</p>
    
    <pre>&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;chrometheme/chromestyle.css&quot; /&gt;</pre>
    
    <p>inside the HEAD section above to reference one of the three alternate CSS files instead: "chromestyle2.css", "chromestyle3.css", or "chromestyle4.css"</p>
    
    <p align="center">Copyright 2006 <a href="http://www.dynamicdrive.com/notice.htm">Dynamic Drive</a></p>
    
    </body>
    </html>
    Also; as said before, this only works in IE and will not in other browsers.

    Hope this helps.
    "Computer games don't affect kids; I mean if Pac-Man affected us as kids, we'd all be running around in darkened rooms, munching magic pills and listening to repetitive electronic music." - Kristian Wilson, Nintendo, Inc, 1989
    TheUnlimitedHost | The Testing Site | Southern Utah Web Hosting and Design

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
  •