The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

navbar drop down

View previous topic View next topic Go down

Solved navbar drop down

Post by tuffstreeters on November 20th 2010, 2:23 am

Hi guys i want to add a drop down navbar similar to this one . http://www.boostcruising.com/ .

thanks.


tuffstreeters
Forumember

Posts : 54
Reputation : 0
Language : english

Back to top Go down

Solved Re: navbar drop down

Post by Yakko! on November 20th 2010, 1:37 pm

forum version?

Yakko!
Forumember

Male Posts : 661
Reputation : -5
Language : Italian, english, Français

Back to top Go down

Solved Re: navbar drop down

Post by Anime Creator on November 20th 2010, 6:09 pm

What do you mean, please take a screen shot.

Anime Creator
Forumember

Posts : 337
Reputation : 7
Language : english

http://www.narutoland.net/index.htm

Back to top Go down

Solved Re: navbar drop down

Post by tuffstreeters on November 20th 2010, 11:16 pm

invision

tuffstreeters
Forumember

Posts : 54
Reputation : 0
Language : english

Back to top Go down

Solved Re: navbar drop down

Post by Anime Creator on November 21st 2010, 12:39 am

OK, someone help here : I also want to learn how to do this LOL

Anime Creator
Forumember

Posts : 337
Reputation : 7
Language : english

http://www.narutoland.net/index.htm

Back to top Go down

Solved Re: navbar drop down

Post by !PU! on November 21st 2010, 11:44 am

Css 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

!PU!
Forumember

Posts : 64
Reputation : 21
Language : english

http://www.presmurdu.com

Back to top Go down

Solved Re: navbar drop down

Post by tuffstreeters on November 21st 2010, 1:55 pm

wow thats is awesome thanks so much.

where do all the codes go?

tuffstreeters
Forumember

Posts : 54
Reputation : 0
Language : english

Back to top Go down

Solved Re: navbar drop down

Post by Anime Creator on November 21st 2010, 4:21 pm

Same here How can I replace my navbars with this.

Anime Creator
Forumember

Posts : 337
Reputation : 7
Language : english

http://www.narutoland.net/index.htm

Back to top Go down

Solved Re: navbar drop down

Post by tuffstreeters on November 22nd 2010, 9:10 pm

can someone please tell me if i have to use all those 3 codes & if so where do they go.

cheers.

tuffstreeters
Forumember

Posts : 54
Reputation : 0
Language : english

Back to top Go down

Solved Re: navbar drop down

Post by !PU! on November 24th 2010, 9:56 am

For Punbb
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

!PU!
Forumember

Posts : 64
Reputation : 21
Language : english

http://www.presmurdu.com

Back to top Go down

Solved Re: navbar drop down

Post by tuffstreeters on November 24th 2010, 1:07 pm

wow it works thanks heaps. :wouhou:
I was using invision now using Punbb i like it. Very good

tuffstreeters
Forumember

Posts : 54
Reputation : 0
Language : english

Back to top Go down

Solved Re: navbar drop down

Post by Guest on November 24th 2010, 3:19 pm

What about the new message link Razz

Solved + Locked

Guest
Guest


Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum