Configuring Anylink CSS Menu v2.2

[Blackbird]

1) Script Title: Anylink CSS Menu v2.2

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

3) Describe problem: In trying to incorporate the Anylink CSS Menu into a website, I am having trouble with configuring the menu, and need help because I am just not getting it.

At this time, I am able to get the menu to go horizontally across the page (by putting it in as a table, which probably isn’t correct) but cannot configure the text on the main links and remove the underlines. Also, on the dropdowns, I would like to change the font color, font size and style, and the color of the dropdowns.

Since the site is not posted yet, I am including the coding as it is now. Any help would be much appreciated.


<link rel="stylesheet" type="text/css" href="styles/anylinkcssmenu.css" />
<script type="text/javascript" src="anylinkcssmenu.js">

/***********************************************
* AnyLink CSS Menu script v2.0- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm for full source code
***********************************************/

</script>

<script type="text/javascript">

//anylinkcssmenu.init("menu_anchors_class") ////Pass in the CSS class of anchor links (that contain a sub menu)
anylinkcssmenu.init("anchorclass")
</script>

<div class="main-nav">

<table width="100%" align="center" cellpadding="0" cellspacing="10">
<tr>
<td align="center" valign="middle"><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Menu</a>


<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="http://www.dynamicdrive.com/">Pastries</a></li>
<li><a href="http://www.cssdrive.com">Doughnuts</a></li>
<li><a href="http://www.javascriptkit.com">Pies</a></li>
<li><a href="http://www.codingforums.com">Cakes</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">Deserts</a></li>
</ul>
</div></td>
<td align="center" valign="middle"><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Default Example</a>


<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
</ul>
</div></td>
<td align="center" valign="middle"><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Default Example</a>


<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
</ul>
</div></td>
<td align="center" valign="middle"><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Default Example</a>


<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
</ul>
</div></td>
<td align="center" valign="middle"><a href="http://www.dynamicdrive.com" class="anchorclass" rel="submenu1">Default Example</a>


<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
</ul>
</div></td>
</tr>
</table>
</div>
.selectedanchor{ /*CSS class that gets added to the currently selected anchor link (assuming it's a text link)*/
background: ;

}


/* ######### Default class for drop down menus ######### */

.anylinkcss{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
border: ;
border-bottom-width: 0;
font: normal 12px "Times New Roman", Times, serif;
color:#FBF9B5;
line-height: 18px;
z-index: 100; /* zIndex should be greater than that of shadow's below */
background: #663300;
width: 150px; /* default width for menu */
}

.anylinkcss ul{
margin: 0;
padding: 0;
list-style-type: none;
font-family:"Times New Roman", Times, serif;#FBF9B5;
font-size:12px;
color:
}

.anylinkcss ul li a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 5px 0;
text-decoration: none;
font-weight: ;
text-indent: 5px;
}

.anylinkcss a:hover{ /*hover background color*/
background: ;
color: black;
}


/* ######### class for shadow DIV ######### */


.anylinkshadow{ /*CSS for shadow. Keep this as is */
position: absolute;
left: 0;
top: 0;
z-index: 99; /*zIndex for shadow*/
background: ;
visibility: hidden;
}

[X96 Web Design]

First of all, welcome to DD! :)

To remove the "underlines", I'm assuming you mean the line under the link. To remove that, simply remove this line in the CSS:

border-bottom: 1px solid black;

That'll remove the line under the items.

I would like to change the font color, font size and style, and the color of the dropdowns.
To change the font color, simply add this line: color:YOURCOLORNAME to .anylinkcss ul li a

To change the font size, add this line: font-size:YOURFONTSIZE. Font sizes can be in Pixels (px), Ems (em, I forget what it stands for), or Points (pt, same as MS Word sizes).

Not sure what you mean by font style, but to change the Font, add font-family:YOUR, FONTS. You can add multiple fonts (separated by commas) so if the first font isn't available on the visitor's computer, the next font(s) will be used. A common one is font-family:Arial, Sans. If Arial isn't installed, Sans will be used, if sans isn't installed, then the user's default font will be used.

All the edits would then make the CSS block look like:


.anylinkcss ul li a{
width: 100%;
display: block;
text-indent: 3px;
padding: 5px 0;
text-decoration: none;
font-weight: ;
text-indent: 5px;
color: YOURCOLORNAME;
font-size: YOURFONTSIZE;
font-family: YOUR, FONTS;
}


Hope this helps!

// X96 \\

[Blackbird]

Thank you very much, this worked!

One additional question if you have time. How do I create the main links that the dropdowns are called from? Are the main links just basic html tags?

I appreciate the help.

[X96 Web Design]

Yep, they're just a HTML tag with a REL="" in them:

<foo rel="anylinkmenu1">

The best thing to have would be an <A> tag (as seen in the examples).

Cheers,
X96

[Blackbird]

Got it! Thanks very much for your help. It all works.