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.

drop-down navbar

View previous topic View next topic Go down

drop-down navbar

Post by Hasan123 on November 27th 2010, 12:17 pm

I'm using phpbb3.

i want drop-down navbar, is it possible?

Hasan123
Forumember

Male Posts : 102
Reputation : 0
Language : Tamil, english
Location : Tamil nadu, india

http://islamintamil.forumakers.com/

Back to top Go down

Re: drop-down navbar

Post by Maki1 on November 27th 2010, 12:57 pm


Maki1
Hyperactive

Male Posts : 2529
Reputation : 442
Language : English »» CSS Stylesheet
Location : The » Support » forum » Section! • No support by PM If you need custom theme please contact me!

http://forumdesigners.forumotion.com/

Back to top Go down

Re: drop-down navbar

Post by !PU! on November 27th 2010, 3:32 pm

Bro try this way in phpbb3 ..... but drop down menu does not proper work with this way .....

1st step .... 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}


2nd step .... Go : ACP >> General >> Messages and Email >> Announcements

1 : General announcements options setting
Activate announcements : Yes
Announcements display : All pages
Scrolling : Deactivate
Save your setting

Now add new Announcement .....
paste this code in your Announcement Content area and save.....
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>
<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>

!PU!
Forumember

Posts : 64
Reputation : 21
Language : english

http://www.presmurdu.com

Back to top Go down

Re: drop-down navbar

Post by Amatio on November 27th 2010, 10:33 pm

It definitely is possible. If want something else as posted above, try some googling after JAVASCRIPT DROP DOWN MENU.

Amatio
New Member

Male Posts : 13
Reputation : 0
Language : Latvian
Location : Riga

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