Drop Down Menu Navigation Bar ~ at Runboard.com
Welcome: You have reached Pastor Rick's Design Elements message board... The board dedicated to constructing NEW and unique skins and layouts using primarily RunBoard hosted graphic elements and helping others... Enjoy your stay and please tell others about this board...
Design Elements
 Combination Snippets
  Drop Down Menu Navigation Bar
Support  Search

runboard.com       Sign up (learn about it) | Sign in (lost password?)


 
Pastor Rick
Head Administrator
Global user (premium)

Registered: 07-2005
Location: Texas Country
Posts: 292
Karma: 4 (+4/-0)
Avatar
Reply | Quote
Drop Down Menu Navigation Bar


OK, I have been working at discovering the secret of menus and navigation bars in RunBoard for awhile now and thanks to the Codingforums.com,
CSSplay, and RunBoard Extra I can now share with you this combination navigation bar and pull down menu.

In your CSS post this:

/* ================================================================ 

This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/basic_dd.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* remove the bullets, padding and margins from the lists */
.menu ul{
list-style-type:none;
padding:0;
margin-left:auto;
margin-right:auto;
}
/* make the top level links horizontal and position relative so that we can position the sub level */
.menu li{
float:left;
position:relative;
z-index:100;
}

/* use the table to position the dropdown list */
.menu table{
position:absolute;
border-collapse:collapse;
z-index:80;
left:-1px;
top:25px;
}

/* style all the links */
.menu a, .menu :visited {
display:block;
font-size:12px;
width:149px;
padding:7px 0;
color:#000;
background:#617E9B;
text-decoration:none;
margin-right:1px;
text-align:center;
}
/* style the links hover */
.menu :hover{
color:#444;
background:#d4d8bd;
}

/* hide the sub level links */
.menu ul ul {
visibility:hidden;
position:absolute;
width:149px;
height:0;
}
/* make the sub level visible on hover list or link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}

table {
  margin: 0 auto;
}


Then in your HTML you post this:
<!-- Drop Down Menu Bar -->

<table cellpadding="0" cellspacing="0"><tr>
<td><div align="center">
<div id="showcase">
<div id="info">
<h2></h2>
<h3></h3>
<h3></h3>

<div class="menu">

<ul>
<li><a href="../menu/index.html">DEMOS<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>
<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>

<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>
<li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>
<li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>
</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="index.html">MENUS<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>

<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="../layouts/index.html">LAYOUTS<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>
<li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>
<li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>
<li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>

<li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="../boxes/index.html">BOXES<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>
<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>

<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>
<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
<li><a href="circles.html" title="circular links">circular links</a></li>
</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="../mozilla/index.html">MOZILLA<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>
<li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
<li><a href="../mozilla/content.html" title="Using content:">content:</a></li>

<li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
<li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>
<li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>
<li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>
<li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
<li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>

</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div></td></tr></table>

There you have it, The dropdown menu navigation bar has been checked in IE 5.5, IE 7, Opera 8, and FireFox 2.02 and works great emoticon... of course you will have to customise the menu for your board, this demo is a modified (slightly) form of the one given on CSSplay and does include the copyright notice requested by Stu Nichols whose work made this menu possible emoticon

---
Image
·TNZ·DE·TRD·ITB·
3/27/2007, 10:08 pm Send Email to Pastor Rick   Send PM to Pastor Rick MSN Blog
 


Add a reply






Powered by AkBBS 0.9.5b  -  Link to us   -  Blogs   -  Hall of Honour   -  Chat
Click here to get your own free message board
You are not logged in (login)      This Board's Date and Time: 11/23/2009, 5:49 am