navbar drop down
4 posters
Page 1 of 1
navbar drop down
Hi guys i want to add a drop down navbar similar to this one . http://www.boostcruising.com/ .
thanks.
thanks.
tuffstreeters- Forumember
- Posts : 54
Reputation : 0
Language : english
Re: navbar drop down
forum version?
Yakko!- Forumember
- Posts : 661
Reputation : -5
Language : Italian, english, Français
Re: navbar drop down
Css Code
Java script
Html code
- Code:
#pubtn
{ margin: 0;
padding: 0;
z-index: 30}
#pubtn li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 12px arial}
#pubtn li a
{ display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 60px;
background-color: #78C773;
background-image: url("http://i30.servimg.com/u/f30/13/70/55/62/grey-u10.png");
color: #FFF;
text-align: center;
text-decoration: none}
#pubtn li a:hover
{ display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
background-color: #56B051;
background-image: url("http://i30.servimg.com/u/f30/13/70/55/62/grey-u10.png");
}
#pubtn div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #78C773 !important;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 10px;}
#pubtn div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background-color: #D7F5D5;
background-image: url("http://i30.servimg.com/u/f30/13/70/55/62/grey-u10.png");
color: #56B051;
font: bold 13px arial}
#pubtn div a:hover
{ background-color: #78C773;
background-image: url("http://i30.servimg.com/u/f30/13/70/55/62/grey-u10.png");
color: #FFF}
Java script
- Code:
<script>
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();
// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}
// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}
// close layer when click-out
document.onclick = mclose;
</script>
Html code
- Code:
<ul id="pubtn">
<li><a href="http://www.presmurdu.com/">Home</a>
</li>
<li><a href="#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">Forums</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="/forum.htm">Forum Home</a>
<a href="/announcements-f7/presmurdu-major-rules-t1240.htm">Forum Rules</a>
<a href="/portal.htm">Forum Portal</a>
<a href="/gallery/index.htm">Forum Gallery</a>
<a href="/memberlist.forum">Memberlist</a>
<a href="/Presmurdu-Forum-Leaders-h10.htm">Forum Leaders </a>
<a href="/donate.forum">VIP Membership</a>
<a href="/report_abuse.forum?page=%2Fforum.htm&report=1">Report & abuse </a>
</div>
</li>
<li><a href="#"
onmouseover="mopen('m3')"
onmouseout="mclosetime()">Help</a>
<div id="m3"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="/faq.htm">Forum FAQ</a>
<a href="/member-s-guideline-f21/">Member's GuideLine</a>
<a href="/problems-f20/">Problems
</a>
</div>
</li>
<li><a href="#"
onmouseover="mopen('m4')"
onmouseout="mclosetime()">Network</a>
<div id="m4"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="http://www.facebook.com/apps/application.php?id=106306119423976">FB Application</a>
<a href="http://www.presmurdu.blogspot.com/">Blogger</a>
<a href="http://www.facebook.com/home.php#!/group.php?gid=301409601106">FB Group
</a>
</div>
</li>
<li><a href="/contact.forum">Contact</a></li>
<li><a href="/search.forum">Search</a></li>
</ul><div style="clear:both"></div>
Demo________Click Here
Re: navbar drop down
wow thats is awesome thanks so much.
where do all the codes go?
where do all the codes go?
tuffstreeters- Forumember
- Posts : 54
Reputation : 0
Language : english
Re: navbar drop down
can someone please tell me if i have to use all those 3 codes & if so where do they go.
cheers.
cheers.
tuffstreeters- Forumember
- Posts : 54
Reputation : 0
Language : english
Re: navbar drop down
For Punbb
Go : ACP >> Display >> Templates >> General >> Overall_Header
Paste this code after "<head>" tag or before "</head>" tag .....
Paste this code after <div id="pun-head"> code and save your Overall_Header Template ..
Now Go : ACP >> Display >> Pictures and Colors >> Color >> CSS Stylesheet
Paste this css code in your stylesheet and submit
Thank you
Go : ACP >> Display >> Templates >> General >> Overall_Header
Paste this code after "<head>" tag or before "</head>" tag .....
- Code:
<script type="text/javascript" src="http://mypu.4umer.com/js-h3.htm"></script>
Paste this code after <div id="pun-head"> code and save your Overall_Header Template ..
- Code:
<ul id="pubtn">
<li><a href="http://www.presmurdu.com/">Home</a>
</li>
<li><a href="#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">Forums</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="/forum.htm">Forum Home</a>
<a href="/announcements-f7/presmurdu-major-rules-t1240.htm">Forum Rules</a>
<a href="/portal.htm">Forum Portal</a>
<a href="/gallery/index.htm">Forum Gallery</a>
<a href="/memberlist.forum">Memberlist</a>
<a href="/Presmurdu-Forum-Leaders-h10.htm">Forum Leaders </a>
<a href="/donate.forum">VIP Membership</a>
<a href="/report_abuse.forum?page=%2Fforum.htm&report=1">Report & abuse </a>
</div>
</li>
<li><a href="#"
onmouseover="mopen('m3')"
onmouseout="mclosetime()">Help</a>
<div id="m3"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="/faq.htm">Forum FAQ</a>
<a href="/member-s-guideline-f21/">Member's GuideLine</a>
<a href="/problems-f20/">Problems
</a>
</div>
</li>
<li><a href="#"
onmouseover="mopen('m4')"
onmouseout="mclosetime()">Network</a>
<div id="m4"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="http://www.facebook.com/apps/application.php?id=106306119423976">FB Application</a>
<a href="http://www.presmurdu.blogspot.com/">Blogger</a>
<a href="http://www.facebook.com/home.php#!/group.php?gid=301409601106">FB Group
</a>
</div>
</li>
<li><a href="/contact.forum">Contact</a></li>
<li><a href="/search.forum">Search</a></li>
<!-- BEGIN switch_user_logged_in -->
<li><a href="/msg.forum?folder=inbox">Messages</a></li>
<li><a href="#"
onmouseover="mopen('m5')"
onmouseout="mclosetime()">Profile</a>
<div id="m5"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="/profile.forum?mode=editprofile">Edit Information</a>
<a href="/profile.forum?mode=editprofile&page_profil=preferences">Edit Preferences</a>
<a href="/profile.forum?mode=editprofile&page_profil=signature">Edit Signature
</a>
<a href="/profile.forum?mode=editprofile&page_profil=attachments">Edit Attachments</a>
<a href="/profile.forum?mode=editprofile&page_profil=avatars">Edit Avatar
</a>
<a href="/profile.forum?mode=editprofile&page_profil=friendsfoes">Friends and foes</a>
<a href="/search.forum?search_id=favouritesearch">Edit Favourite
</a>
<a href="/search.forum?search_id=draftsearch">Edit Drafts
</a>
<a href="/profile.forum?mode=editprofile&page_profil=facebook">Facebook invite
</a>
</div>
</li>
<li><a href="/login.forum?logout">Logout</a></li>
<!-- END switch_user_logged_in -->
<!-- BEGIN switch_user_logged_out -->
<li><a href="/login.forum?connexion">Login</a></li>
<li><a href="/profile.forum?mode=register">Register</a></li>
<!-- END switch_user_logged_out -->
</ul><div style="clear:both"></div>
Now Go : ACP >> Display >> Pictures and Colors >> Color >> CSS Stylesheet
Paste this css code in your stylesheet and submit
- Code:
#pubtn
{ margin: 0;
padding: 0;
z-index: 30}
#pubtn li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 12px arial}
#pubtn li a
{ display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 60px;
background-color: #78C773;
background-image: url("http://i30.servimg.com/u/f30/13/70/55/62/grey-u10.png");
color: #FFF;
text-align: center;
text-decoration: none}
#pubtn li a:hover
{ display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
background-color: #56B051;
background-image: url("http://i30.servimg.com/u/f30/13/70/55/62/grey-u10.png");
}
#pubtn div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #78C773 !important;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 10px;}
#pubtn div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background-color: #D7F5D5;
background-image: url("http://i30.servimg.com/u/f30/13/70/55/62/grey-u10.png");
color: #56B051;
font: bold 13px arial}
#pubtn div a:hover
{ background-color: #78C773;
background-image: url("http://i30.servimg.com/u/f30/13/70/55/62/grey-u10.png");
color: #FFF}
Thank you
Re: navbar drop down
wow it works thanks heaps.
I was using invision now using Punbb i like it.
I was using invision now using Punbb i like it.
tuffstreeters- Forumember
- Posts : 54
Reputation : 0
Language : english
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum