Results 1 to 3 of 3

Thread: Accordion menu with rounded corners

  1. #1
    Join Date
    May 2011
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Accordion menu with rounded corners

    1) Script Title: Apple style Accordion Menu

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...menu-apple.htm

    3) Describe problem: Hello all,
    I was looking to have the menu with rounded corners instead of square, is this possible?

    Couldn't find any info searching, I am new to scripts so I don't know where to start.
    Your help is appreciated, thanks
    Kev

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

    Default

    You can use CSS3's border-radius property to apply round corners to hard edges of an element, such as to the four corners of each menu link within the menu. The following modifies the default CSS of the menu to do just that:

    Code:
    .submenu{display: none}
    a.hiddenajaxlink{display: none}
    
    .applemenu{
    margin: 5px 0;
    padding: 0;
    width: 170px; /*width of menu*/
    }
    
    .applemenu div.silverheader a{
    background: black url(silvergradient.gif) repeat-x center left;
    -moz-border-radius: 5px;
    font: normal 12px Tahoma, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif;
    color: white;
    display: block;
    position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
    width: auto;
    padding: 5px 0;
    padding-left: 8px;
    text-decoration: none;
    }
    
    
    .applemenu div.silverheader a:visited, .applemenu div.silverheader a:active{
    color: white;
    }
    
    
    .applemenu div.selected a, .applemenu div.silverheader a:hover{
    background-image: url(silvergradientover.gif);
    color: white;
    }
    
    .applemenu div.submenu{ /*DIV that contains each sub menu*/
    background: white;
    padding: 5px;
    height: 300px; /*Height that applies to all sub menu DIVs. A good idea when headers are toggled via "mouseover" instead of "click"*/
    }
    DD Admin

  3. #3
    Join Date
    May 2011
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks Admin, managed to get it sorted looking through http://www.dynamicdrive.com/style/cs...border_radius/


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
  •