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

Thread: Chrome Style menu question for editting

  1. #1
    Join Date
    Dec 2005
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Chrome Style menu question for editting

    hey m using the chrome menu for my site... itz one on the best menu i have seen.. and i need some editting help in it...



    1. i need to remove tht divider from the end... how do it do tht..
    2. i want rounded edges for the menu.. on all the 4 sides..


    .

  2. #2
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    You can remove the right most border by adding to the very last <a> element of the menu bar (not the drop down menu) the following:

    Code:
    <div id="chromemenu">
    <ul>
    <li><a href="http://www.dynamicdrive.com">Home</a></li>
    <li><a href="#" onMouseover="cssdropdown.dropit(this,event,'dropmenu1')">Resources</a></li>
    <li><a href="#" onMouseover="cssdropdown.dropit(this,event,'dropmenu2')" style="background-image: none">News</a></li>
    </ul>
    </div>
    The part in red is new.

    2. i want rounded edges for the menu.. on all the 4 sides
    Unfortunately this is something you'll need to do using a graphics program. If you need help with the CSS to connect the round edges to the two ends, just post on the forums.

  3. #3
    Join Date
    Dec 2005
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by ddadmin

    Unfortunately this is something you'll need to do using a graphics program. If you need help with the CSS to connect the round edges to the two ends, just post on the forums.
    thankz a lot......

    well no probs abt the graphic part .. suppose i make 2 images for both the ends of the menu.. how do i use it .. i.e., how do i insert it in the css file?

  4. #4
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    You can post the two images here, and either myself or someone else can take a look and see if there's an easy way to integrate them to this particular script's CSS.

  5. #5
    Join Date
    Dec 2005
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thankz again

    well the 2 images tht i need at both the ends of the menu are

    -----

    if needed i can also post the css!!
    waiting for a reply

    and i was just wondering whtz the use of the javascrpit file given along with the menu ??
    Last edited by pratik; 01-05-2006 at 07:49 AM.

  6. #6
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Yes please post (by uploading as an attachment) your CSS file, in case there's changes from the default. The JavaScript file is what makes the menus drop down- you definitely need that.

  7. #7
    Join Date
    Dec 2005
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    heere is the css file

    #chromemenu{
    }

    #chromemenu:after{ /*Add margin between menu and rest of content in Firefox*/
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
    /* main menu*/
    #chromemenu ul{
    border: 0px solid #000000;
    width: 100%;
    height: 25px;
    background: url(chromebg4 copy.gif) center center repeat-x; /*Theme Change here*/
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right:0;
    margin: 0;
    float: right;
    font: bold 11px Verdana;
    }


    #chromemenu ul li{
    display: inline;
    }

    /* menu text*/
    #chromemenu ul li a{
    float: left;
    color: #FFFFFF;
    font-weight: bold;
    padding: 6px 12px 7px 7px;
    text-decoration: none;
    background: url(divider4 copy.gif) center right no-repeat; /*Theme Change here*/
    }

    /*hover text*/
    #chromemenu ul li a:hover{
    color: #000000;
    }

    #chromemenu ul li a[onMouseover]: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 #990000; /*Theme Change here*/
    border-bottom-width: 0;
    font:bold 10px Arial;
    line-height:18px;
    z-index:100;
    background-color: red;
    width: 110px;
    visibility: hidden;
    }

    .dropmenudiv a{
    width: 100%;
    display: block;
    text-indent: 3px;
    border-bottom: 1px solid #990000; /*Theme Change here*/
    padding: 2px 0;
    text-decoration: none;
    font-weight: bold;
    color: white;
    }

    .dropmenudiv a:hover{ /*Theme Change here*/
    background-color: #990000;
    }

  8. #8
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    I didn't have too much time to fiddle with the CSS for the original menu, but based on the things I tried, it didn't seem to want to play nice and accomodate two additional images on both ends (for the rounded corners). It was easier just so create a whole new CSS file with this intent from the start:

    Code:
    <style type="text/css">
    #chromemenu{
    margin: 0;
    padding: 0;
    }
    
    #chromemenu ul{
    background: url(background.gif) repeat-x;
    margin-left: 0;
    padding-left: 0;
    margin: 0;
    float: left;
    font: bold 80% Verdana;
    }
    
    #chromemenu ul li{
    display: inline;
    }
    
    
    #chromemenu ul li a{
    float: left;
    color: black;
    font-weight: bold;
    padding: 10px 13px 3px 6px;
    text-decoration: none;
    background: url(divider.gif) top right no-repeat;
    }
    
    #chromemenu ul li a:hover{
    text-decoration: underline;
    }
    
    </style>
    
    
    <div id="chromemenu">
    <div style="float: left; background: url(leftcorner.gif) top right no-repeat; width: 8px; height: 32px"></div>
    <ul>
    <li><a href="sdfsf">Test</a></li>
    <li><a href="sdfsf">Test</a></li>
    <li><a href="sdfsf">Test</a></li>
    <li><a href="sdfsf">Test</a></li>
    <li><a href="sdfsf">Test</a></li>
    </ul>
    <div style="float: left; background: url(rightcorner.gif) top right no-repeat; width: 7px; height: 32px;"></div>
    </div>
    You'll need to change the image references to your own of course. It may still not look exactly the way you want it to, however. That's the problem with CSS- it needs to be custom tailored each step of the way.

  9. #9
    Join Date
    Dec 2005
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by ddadmin
    I didn't have too much time to fiddle with the CSS for the original menu, but based on the things I tried, it didn't seem to want to play nice and accomodate two additional images on both ends (for the rounded corners). It was easier just so create a whole new CSS file with this intent from the start:

    .....................
    You'll need to change the image references to your own of course. It may still not look exactly the way you want it to, however. That's the problem with CSS- it needs to be custom tailored each step of the way.
    thankz a ton

    so u mean tht i must replace this css with the original css... just changin the name for my images on bith ends

  10. #10
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Well, you'll need to replace both the CSS and the HTML of the menu that displays the menu bar itself (not the drop down menus). You'll see the new HTML in the code I posted above.

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
  •