Results 1 to 7 of 7

Thread: Remove ul functions i dd menu

  1. #1
    Join Date
    Mar 2008
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Remove ul functions i dd menu

    1) Script Title: Chrome CSS Drop Down Menu

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...rome/index.htm

    3) Describe problem:
    Hi. Plese see http://www.holedesign.com/asp/welcome.asp for example. I would like to have the menu dropped down as is, but list the links horisontally (or any html style i prefeer) instead of having the javascript makin it ul styled.

    The menu are database generated, so i would like to have full design-freedom on the output aswell.

    Thanks

    - håvard -

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You could just change the style from:

    Code:
    /* ######### 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: progid:DXImageTransform.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;
    }
    to:

    Code:
    /* ######### 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: auto!important;
    visibility: hidden;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA,direction=135,strength=4); /*Add Shadow in IE. Remove if desired*/
    }
    
    
    .dropmenudiv a{
    width: auto;
    display: inline;
    text-indent: 3px;
    border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
    padding: 2px 0;
    text-decoration: none;
    font-weight: bold;
    color: black;
    }
    - John
    ________________________

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

  3. #3
    Join Date
    Mar 2008
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Hmmm...

    Thanks for the feedback. But I really did not get the result I was looking for.
    Please see http://www.holedesign.com/asp/welcome.asp for the result.

    I did the following:
    1: Changed the 2 variables you market (and removed the !important comment, correct ??)
    2: Removed the width style on the layer itself, to truly make it auto, correct?

    It still looks like it creates an ul function. I searched the js place to correct, but could find it...

    Thanks for the effort.

    - håvard -

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    !important is not a comment. It is valid css style syntax which tells the browser to override all other later property/value pairs for all elements selected by that rule that might contradict it, unless they also have the !important syntax. But my primary reason for using it was to override the individual width settings which you say you removed. However, you might as well reinstate !important.

    Now, to get this working, use a valid URL DOCTYPE, like:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 
    Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Holedesign </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="keywords" content="">
    <meta name="descri . . .
    Then, just to be safe, also get rid of:

    Code:
    * html .dropmenudiv a{ /*IE only hack*/
    width: 100%;
    }
    Last edited by jscheuer1; 03-01-2008 at 06:24 PM. Reason: clarity
    - John
    ________________________

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

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

    spaniland (03-02-2008)

  6. #5
    Join Date
    Mar 2008
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thanks a lot for a straight forward and educationally post!!!!

    Have nice one...

    - håvard -

  7. #6
    Join Date
    Mar 2008
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Talking Centering the drop down

    Maybe I should started a new thread, but here goes...

    I would like to center the drop down menu.
    In the menu "møbler" at http://holedesign.com/asp/welcome.asp the option "reoler" should be located directly under.

    Once again, thanks a lot...

    - håvard -

  8. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Well, centering it will not necessarily achieve the exact alignment that you envision, but it will be very close. Try this out - replace (in chrome.js near the top):

    Code:
    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;
    },
    with:

    Code:
    getposOffset:function(what, offsettype){
    var totaloffset=(offsettype=="left")? what.offsetLeft+what.offsetWidth/2 : what.offsetTop;
    var parentEl=what.offsetParent;
    while (parentEl!=null){
    totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
    parentEl=parentEl.offsetParent;
    }
    return totaloffset-(offsettype=="left"? this.dropmenuobj.offsetWidth/2 : 0);
    },
    It takes the horizontal center of the trigger as the starting point and subtracts half of the width of the drop down to arrive at the drop down's left position. Basically, centers the drop down under the trigger.

    Now personally, I think it looked better the way it was, but it's up to you which you prefer.
    Last edited by jscheuer1; 03-02-2008 at 03:56 AM. Reason: simplify code additions
    - John
    ________________________

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

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

    spaniland (03-02-2008)

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
  •