Runboard.com
You're welcome.
Welcome: You have reached Pastor Rick's Design Elements message board... Enjoy your stay and please tell others about this board...

Runboard Social       Sign up (learn about it) ● Sign in (lost password?)


 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Head Administrator
Global user (premium)

Registered: 07-2005
Location: Texas
Posts: 541
Karma: 11 (+12/-1)
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 [sign in to see URL],
]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 [sign in to see URL]
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/[sign in to see URL]">DEMOS<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../menu/[sign in to see URL]" title="The zero dollar ads page">zero dollars</a></li>
<li><a href="../menu/[sign in to see URL]" title="Wrapping text around images">wrapping text</a></li>
<li><a href="../menu/[sign in to see URL]" title="Styling forms">styled form</a></li>
<li><a href="../menu/[sign in to see URL]" title="Removing active/focus borders">active focus</a></li>

<li><a href="../menu/[sign in to see URL]" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a href="../menu/[sign in to see URL]" title="Image Map for detailed information">image map</a></li>
<li><a href="../menu/[sign in to see URL]" title="fun with background images">fun backgrounds</a></li>
<li><a href="../menu/[sign in to see URL]" title="fade-out scrolling">fade scrolling</a></li>
<li><a href="../menu/[sign in to see URL]" title="em size images compared">em sized images</a></li>
</ul>

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

<li><a href="[sign in to see URL]">MENUS<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="[sign in to see URL]" title="a coded list of spies">spies menu</a></li>
<li><a href="[sign in to see URL]" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="[sign in to see URL]" title="an enlarging unordered list">enlarging list</a></li>

<li><a href="[sign in to see URL]" title="an unordered list with link images">link images</a></li>
<li><a href="[sign in to see URL]" title="non-rectangular links">non-rectangular</a></li>
<li><a href="[sign in to see URL]" title="jigsaw links">jigsaw links</a></li>
<li><a href="[sign in to see URL]" title="circular links">circular links</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="../layouts/[sign in to see URL]">LAYOUTS<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../layouts/[sign in to see URL]" title="Cross browser fixed layout">Fixed 1</a></li>
<li><a href="../layouts/[sign in to see URL]" title="Cross browser fixed layout">Fixed 2</a></li>
<li><a href="../layouts/[sign in to see URL]" title="Cross browser fixed layout">Fixed 3</a></li>
<li><a href="../layouts/[sign in to see URL]" title="Cross browser fixed layout">Fixed 4</a></li>

<li><a href="../layouts/[sign in to see URL]" 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/[sign in to see URL]">BOXES<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="[sign in to see URL]" title="a coded list of spies">spies menu</a></li>
<li><a href="[sign in to see URL]" title="a horizontal vertical menu">vertical menu</a></li>

<li><a href="[sign in to see URL]" title="an enlarging unordered list">enlarging list</a></li>
<li><a href="[sign in to see URL]" title="an unordered list with link images">link images</a></li>
<li><a href="[sign in to see URL]" title="non-rectangular links">non-rectangular</a></li>
<li><a href="[sign in to see URL]" title="jigsaw links">jigsaw links</a></li>
<li><a href="[sign in to see URL]" title="circular links">circular links</a></li>
</ul>

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

<li><a href="../mozilla/[sign in to see URL]">MOZILLA<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../mozilla/[sign in to see URL]" title="A drop down menu">drop down menu</a></li>
<li><a href="../mozilla/[sign in to see URL]" title="A cascading menu">cascading menu</a></li>
<li><a href="../mozilla/[sign in to see URL]" title="Using content:">content:</a></li>

<li><a href="../mozilla/[sign in to see URL]" title=":hover applied to a div">mozzie box</a></li>
<li><a href="../mozilla/[sign in to see URL]" title="I can build a rainbow">rainbow box</a></li>
<li><a href="../mozilla/[sign in to see URL]" title="Snooker cue">snooker cue</a></li>
<li><a href="../mozilla/[sign in to see URL]" title="Target Practise">target practise</a></li>
<li><a href="../mozilla/[sign in to see URL]" title="Two tone headings">two tone headings</a></li>
<li><a href="../mozilla/[sign in to see URL]" 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 [sign in to see URL] 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

---

RSFRDAdvertise Boards On TRDREITB
3/27/2007, 10:08 pm Link to this post Send Email to Pastor Rick   Send PM to Pastor Rick Blog
 


Add a reply





You are not logged in (login)