Welcome To Freeware Tips Forum Index
Join! (free) • Search • FAQ • Memberlist • Usergroups • Log in

Advanced Drop Down Menu (Code not Tut)

 
Reply to topic    Welcome To Freeware Tips Forum Index » Coding Tips -> CSS View previous topic
View next topic
Advanced Drop Down Menu (Code not Tut)
Author Message
Please Register and Login to this forum to stop seeing this advertsing.


Speed
Site Admin
Joined: 16 Jul 2008
Posts: 1247
Add Comment
Show Comments
Add Karma

Post Advanced Drop Down Menu (Code not Tut) Reply with quote
This part makes your drop down effect, also the font and all that
Code:
<style type="text/css">
.p-l1v {float:left;position:relative;margin:0;padding:0;}
.p-l1 {float:left;position:relative;margin:0;padding:0;}

.p-l2 {list-style:none;position:absolute; top:0;left:100%;width:100px; text-align:right; padding:0; margin:0; border-bottom:1px solid blue;}
.p-l2v {list-style:none; position:absolute; top:100%; left:0; width:100px; text-align:left; padding:0; margin:0; border-top:1px solid lightblue; border-bottom:1px solid lightblue; background-color:f2f2f2; }

.p-l3 {list-style:none; position:absolute; top:-1px; left:100%; width:100px; text-align:left; padding:0; margin:0; border-top:1px solid lightblue; border-bottom:1px solid lightblue; background-color:f2f2f2; }

div ul {display:none;}
ul ul {display:none;}

.p-li1 {padding:2px; margin:0; position:relative; background:white; border:1px solid orange; }

.p-li2 {margin:0; padding:2px; border-top:0px; border-top:0px; border-left:1px solid lightblue; border-right:1px solid lightblue; position:relative; background:f2f2f2 !important; }

.p-li3 {margin:0; padding:2px; border-top:0px; border-top:0px; border-left:1px solid lightblue; border-right:1px solid lightblue; position:relative; background:f2f2f2 !important; }

div.p-l1:hover > ul {display:block;}
li.p-li2:hover > ul {display:block;}
li.p-li2:hover {background:white;}
li.p-li3:hover {background:white;}
</style>


This Part Defines it, just put your links and shit down so it'll work.
Code:
<div class="p-l1v">
<div class="p-l1">
<a href="URL">Hover 1   </a>


<ul class="p-l2v">

<li class="p-li2"><a href="URL_HERE">TEXT HERE</a>
<ul class="p-l3">
<li class="p-li3"><a href="URL_HERE">TEXT HERE</a></li>
<li class="p-li3"><a href="URL_HERE">TEXT HERE</a></li>
</ul></li>

<li class="p-li2"><a href="URL_HERE">TEXT HERE</a>
<ul class="p-l3">
<li class="p-li3"><a href="URL_HERE">TEXT HERE</a></li>
<li class="p-li3"><a href="URL_HERE">TEXT HERE</a></li>

</ul>

</li></ul>
</div>
<div class="p-l1">
<a href="URL">Hover 2</a>

<ul class="p-l2v">

<li class="p-li2"><a href="URL_HERE">TEXT HERE
<ul class="p-l3">
<li class="p-li3"><a href="URL_HERE">TEXT HERE</a></li>
<li class="p-li3"><a href="URL_HERE">TEXT HERE</a></li>
</ul></li>

<li class="p-li2"><a href="URL_HERE">TEXT HERE</a>
<ul class="p-l3">
<li class="p-li3"><a href="URL_HERE">TEXT HERE</a></li>

</ul>

</li></ul>
</div>
</div>



Altogether
Code:
<style type="text/css">
.p-l1v {float:left;position:relative;margin:0;padding:0;}
.p-l1 {float:left;position:relative;margin:0;padding:0;}

.p-l2 {list-style:none;position:absolute; top:0;left:100%;width:100px; text-align:right; padding:0; margin:0; border-bottom:1px solid blue;}
.p-l2v {list-style:none; position:absolute; top:100%; left:0; width:100px; text-align:left; padding:0; margin:0; border-top:1px solid lightblue; border-bottom:1px solid lightblue; background-color:f2f2f2; }

.p-l3 {list-style:none; position:absolute; top:-1px; left:100%; width:100px; text-align:left; padding:0; margin:0; border-top:1px solid lightblue; border-bottom:1px solid lightblue; background-color:f2f2f2; }

div ul {display:none;}
ul ul {display:none;}

.p-li1 {padding:2px; margin:0; position:relative; background:white; border:1px solid orange; }

.p-li2 {margin:0; padding:2px; border-top:0px; border-top:0px; border-left:1px solid lightblue; border-right:1px solid lightblue; position:relative; background:f2f2f2 !important; }

.p-li3 {margin:0; padding:2px; border-top:0px; border-top:0px; border-left:1px solid lightblue; border-right:1px solid lightblue; position:relative; background:f2f2f2 !important; }

div.p-l1:hover > ul {display:block;}
li.p-li2:hover > ul {display:block;}
li.p-li2:hover {background:white;}
li.p-li3:hover {background:white;}
</style>
<div class="p-l1v">
<div class="p-l1">
<a href="URL">Hover 1   </a>


<ul class="p-l2v">

<li class="p-li2"><a href="URL_HERE">TEXT HERE</a>
<ul class="p-l3">
<li class="p-li3"><a href="URL_HERE">TEXT HERE</a></li>
<li class="p-li3"><a href="URL_HERE">TEXT HERE</a></li>
</ul></li>

<li class="p-li2"><a href="URL_HERE">TEXT HERE</a>
<ul class="p-l3">
<li class="p-li3"><a href="URL_HERE">TEXT HERE</a></li>
<li class="p-li3"><a href="URL_HERE">TEXT HERE</a></li>

</ul>

</li></ul>
</div>
<div class="p-l1">
<a href="URL">Hover 2</a>

<ul class="p-l2v">

<li class="p-li2"><a href="URL_HERE">TEXT HERE
<ul class="p-l3">
<li class="p-li3"><a href="URL_HERE">TEXT HERE</a></li>
<li class="p-li3"><a href="URL_HERE">TEXT HERE</a></li>
</ul></li>

<li class="p-li2"><a href="URL_HERE">TEXT HERE</a>
<ul class="p-l3">
<li class="p-li3"><a href="URL_HERE">TEXT HERE</a></li>

</ul>

</li></ul>
</div>
</div>




_________________


Train Insane or Remain The Same
There's No Room In A Warriors Heart For Self Doubt
Wed Jul 16, 2008 1:14 pm View user's profile Send private message Visit poster's website
Display posts from previous:    
Reply to topic    Welcome To Freeware Tips Forum Index » Coding Tips -> CSS All times are GMT
Page 1 of 1

 
Jump to: 
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum

Card File  Gallery  Forum Archive
Powered by phpBB © 2001, 2005 phpBB Group
Design by Speed