PDA

View Full Version : Horizontal AnyLink CSS Menu



Rukichu
06-12-2010, 07:54 PM
1) Script Title: Anylink Css Menu

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

3) Describe problem: Hi, I've been trying to get the Anylink CSS Menu headers to go horizontal, but I've just had the hardest time getting it to do that. I've done it a few times before and it worked just perfectly, but for the life of me I cannot remember how I did it before! I've just become so frustrated!
I basically want it like the Horizontal CSS Menu, but in AnyLink CSS Menu script and style. I've done it before, so I know it's possible.
Here is my current CSS code of the Menu section of my site:



.menu a{
width: 1000px;
height: 41px;
list-style: none;
margin: 1px 10px 1px 1px;
padding: 5px 5px 2px 10px;
text-decoration: none;
font-family: "Lucida Sans";
font-size: 9px;
background: transparent;
color: #a4a4a4;
text-transform: none;
display: block;
}

.menu a:hover{
width: 1000px;
height: 41px;
list-style: none;
margin: 1px 10px 1px 1px;
padding: 5px 5px 2px 10px;
text-decoration: none;
font-family: "Lucida Sans";
font-size: 9px;
background: transparent
color: #DEDEDE;
text-transform: lowercase;
border: 0px;
display: block;
}


And here is the CSS for the Anylink CSS Menu that I have:



.anylinkcss{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
border: 0px;
border-bottom-width: 0;
font: normal 10px Verdana, Geneva;
color: #8B8989;
line-height: 18px;
z-index: 100; /* zIndex should be greater than that of shadow's below */
background: #787878;
width: 130px; /* default width for menu */
}

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


My site URL is http://unendingsanctuary.darktwilight.org/tester.php and I'm trying to arrange the "Site, Graphics, Music" links you see there horizontally. But as you can see, they're going vertical. (I know some other things in the site look messy right now, but I'm trying to focus on the CSS menu for now.)
Any help is appreciated.

azoomer
06-12-2010, 08:43 PM
Changing you menu to this

<div class="menu">
<ul>
<li><a href="http://unendingsanctuary.darktwilight.org/index.php"
class="anchorclass" rel="submenu1"><img
src="tester.php_files/navsite.png" border="0"></a></li>

<li><a href="http://unendingsanctuary.darktwilight.org/index.php"
class="anchorclass" rel="submenu1"><img
src="tester.php_files/navgraphics.png" border="0"></a></li>

<li><a href="http://unendingsanctuary.darktwilight.org/index.php"
class="anchorclass" rel="submenu1"><img
src="tester.php_files/navmusic.png" border="0"></a></li>
</ul>
</div>
And then adding this to your css

.menu{
list-style: none;
}
.menu li{
float: left;
margin: 0 0.15em; width:200px;
}
will make it horizontal. You would still have to finetune it to make it look right

Rukichu
06-12-2010, 08:55 PM
Ahhh thank you so much, you're seriously a life saver!!
You have no idea how happy I am right now; thank you thank you thank you~!!!