PDA

View Full Version : want to customize the script of AnyLink CSS Menu v2.2



nisha
06-08-2010, 11:44 AM
1) Script Title: customize the script of AnyLink CSS Menu v2.2

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex1/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 !

ddadmin
06-08-2010, 10:23 PM
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:


/* ######### 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. :)