Results 1 to 2 of 2

Thread: want to customize the script of AnyLink CSS Menu v2.2

  1. #1
    Join Date
    Jun 2008
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default want to customize the script of AnyLink CSS Menu v2.2

    1) Script Title: customize the script of AnyLink CSS Menu v2.2

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

    3) Describe problem:

    I wanted to use the script for one of my website dropdown menu. so i found the AnyLink CSS Menu v2.2 script from dd best suited to my need but i am not able to add a bullet image in the dropdown menu and also i want to adjust the text according to the bullet i.e. text besides the bullet.

    Also would like to know from where can i change the height and width of the dropdown menu.

    sorry, forgot to tell you people that i have used demo one for my dropdown menu the horizontal one. I am also attaching the image of my dropdown menu for a better idea.

    any kind of Help will be Appriciated !

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

    Default

    You should be able to do all of the above just by customizing anylinkcssmenu.css. To add a bullet to your drop down menus and modify its width, the following modified .anylinkcss class should do it, with the changes in red below:

    Code:
    /* ######### Default class for drop down menus ######### */
    
    .anylinkcss{
    position: absolute;
    left: 0;
    top: 0;
    visibility: hidden;
    border: 1px solid black;
    border-bottom-width: 0;
    font: normal 12px Verdana;
    line-height: 18px;
    z-index: 100; /* zIndex should be greater than that of shadow's below */
    background: lightyellow;
    width: 250px; /* default width for menu */
    }
    
    .anylinkcss ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
    }
    
    .anylinkcss ul li a{
    width: 270px;
    display: block;
    text-indent: 3px;
    border-bottom: 1px solid black;
    padding: 1px 0;
    text-decoration: none;
    font-weight: bold;
    text-indent: 5px;
    background: white url(arrow-list.gif) no-repeat 5px center;
    padding-left: 20px;
    }
    
    .anylinkcss a:hover{ /*hover background color*/
    background-color: black;
    color: white;
    }
    In other words, it's just a matter of using CSS based on your understanding of it.
    DD Admin

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
  •