REGISTER or LOGIN to have the annoying ads removed.
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[tut]Create a Drop Down Menu in Welcome block Header
#1
Smile 
Create a Drop Down Menu in Welcome block Header

Hello friends,
i have been working with drop downs and i found a best drop down menu bar in a site called soportemyb.com

I tried to incorporate into my site,and i imported a similar type of drop down menu bar to mybb from a tutorial from DYNAMIC DRIVE and modified to our use.

I think this is the best menu for mybb and even VB dosent have this.

so follow the steps :

1.Download the following files.
a)anylinkcssmenu.css
b)anylinkcssmenu.js

Then
upload the anylinkcssmenu.js file to your root>jscripts folder.

Now its time for us to edit the themes.

2.In ACP go to themes and templates>themes>yourtheme>addstylesheet>

now make a new stylesheet,click options globally,and name it as anylinkcssmenu.css and click write my own content.

Fill in it the data from the file you have down loaded called [b]anylinkcssmenu.css and save it.[/b]

3.Go to your theme>global.css>edit in Advanced mode>

and add this code at the bottom.
Code:
.anylinkcss {
    position:absolute;
    left:0;
    top:0;
    visibility:hidden;
    border:1px solid black;
    font:normal 10px Verdana;
    z-index:100;
    background:#000;
    min-width:130px;
    padding:3px
}

.anylinkcss ul{
    margin:0;
    padding:0;
    list-style-type:none;
    text-align:left
}

.anylinkcss ul li a{
    display:block;
    padding:4px 10px 4px 4px;
    text-decoration:none;
    font-weight:bold;
    background:#d0f0ff;
    color:#000000
}

.anylinkcss ul li a:hover{
    background:#ddd;
    color:#000000
}

.anylinkshadow{
    position:absolute;
    margin-top:4px;
    left:0;
    top:0;
    z-index:99;
    background:black;
    visibility:hidden
}

ul.bloque_miembro{
    margin:0;
    padding:0
}

ul.bloque_miembro li{
    display:inline
}

ul.bloque_miembro li a{
    font-size:11px;
    font-weight:bold;
    float:left;
    padding:4px 15px;
    outline:none
}

ul.bloque_miembro li a:link,ul.bloque_miembro li a:visited{
    color:#000;
    text-decoration:none
}

ul.bloque_miembro li a:hover,ul.bloque_miembro li a:active{
    color:#515151;
    text-decoration:none
}

ul.bloque_visitante{
    margin:0;
    padding:4px;
    text-align:center
}

ul.bloque_visitante li{
    display:inline
}

ul.bloque_visitante li a{
    font-size:11px;
    font-weight:bold;
    padding:4px 50px;
    outline:none
}

ul.bloque_visitante li a:link,ul.bloque_visitante li a:visited{
    color:#000;
    text-decoration:none
}

ul.bloque_visitante li a:hover,ul.bloque_visitante li a:active{
    color:#515151;
    text-decoration:none
}        
    
input.textbox, .pagination .pagination_current, .pagination a, blockquote, .codeblock, .codeblock code, .bottommenu, textarea, fieldset, .spoiler, legend {
    border-radius: 5px 5px 5px 5px;
}
.tborder, .pm_alert, .red_alert {
    border-radius: 8px 8px 8px 8px;
}
.wg_tborder {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: 0 0 30px #777777;
}
select {
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}
.popup_menu {
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 20px #777777;
}
.popup_menu .popup_item {
    border-radius: 5px 5px 5px 5px;
}
.navigation {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
#panel, .anuncio {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.anylinkcss {
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 8px #777777;
}
.button {
    border-radius: 5px 5px 5px 5px;
}
.button:hover {
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}    


#panel {
    background: url(http://your url/images/yourtheme/ms.gif) repeat-x scroll left top transparent;
    color: #000000;
    font-size: 11px;
    height: 24px;
}

note:
In #Panel{ you need to edit your URL details>
upload the image given below and fill in the correct image path.see the attachment just below.

[Image: 83654926.gif]

4.Now its all HTML business.

Navigate to your templates>your theme templates>Header templates>header_welcomeblock member templates.

Replace the template code with the code given below.

Note: you can add any links you like,provided they are valid,and also edit correct path,of images.


Code:
<li style="float: right;"><a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}"> <strong>{$lang->welcome_logout}</strong></a></li>
</ul>

<script type="text/javascript" src="http://www.yoursite.com/jscripts/anylinkcssmenu.js"></script>
<script type="text/javascript">anylinkcssmenu.init("anchorclass")</script>

<div id="panel">
<ul class="bloque_miembro">
<li><a href="#" class="anchorclass" rel="mensajesforos[click]">Messages/Posts <img src="images/yourtheme/down.gif" alt="Desplegable" width="11" height="8" /></a></li>
<li><a href="#" class="anchorclass" rel="comunidad[click]">Community <img src="images/yourtheme/down.gif" alt="Desplegable" width="11" height="8" /></a></li>
<li><a href="http://www.yoursite.com/misc.php?action=help">MS Help </a></li>
</ul>
<ul class="bloque_miembro" style="float: right;">
<li><a href="#" class="anchorclass" rel="paneldecontrol[click]">My Control Panel <img src="images/yourtheme/down.gif" alt="Desplegable" width="11" height="8" /></a></li>
<li><a href="#" class="anchorclass" rel="usuario[click]">{$mybb->user['username']}  <img src="images/yourtheme/down.gif" alt="Desplegable" width="11" height="8" /></a></li>
</ul>
</div>
<div id="mensajesforos" class="anylinkcss">
<ul>
<li class="thead" style="padding:3px; font-weight:bold;">Activity </li>
<li><a href="http://www.yoursite.com/search.php?action=getnew">New posts </a></li>
<li><a href="http://www.yoursite.com/search.php?action=getdaily">Todays posts </a></li>
</ul>
</div>
<div id="comunidad" class="anylinkcss">
<ul>
<li class="thead" style="padding:3px; font-weight:bold;">Community </li>
<li><a href="http://www.yoursite.com/memberlist.php">Memberlist </a></li>
<li><a href="http://www.yoursite.com/showteam.php">Team </a></li>
<li><a href="http://www.yoursite.com/online.php">Online Now </a></li>
<li><a href="http://www.yoursite.com/online.php?action=today">Online Today </a></li>
</ul>
</div>
<div id="paneldecontrol" class="anylinkcss">
<ul>
<li class="thead" style="padding:3px; font-weight:bold;">Profile Settings</li>
<li><a href="http://www.yoursite.com/usercp.php">Control Panel </a></li>
<li class="thead" style="padding:3px; font-weight:bold;">My profile </li>
<li><a href="http://www.yoursite.com/usercp.php?action=profile">Edit Profile </a></li>
<li><a href="http://www.yoursite.com/usercp.php?action=avatar">Edit Avatar </a></li>
<li><a href="http://www.yoursite.com/usercp.php?action=editsig">Edit signature </a></li>
<li>{$modcplink}{$admincplink}</li>
</ul>
</div>
<div id="usuario" class="anylinkcss">
<ul>
<li class="thead" style="padding:3px; font-weight:bold;">{$mybb->user['username']} </li>
<li><a href="{$mybb->settings['bburl']}/member.php?action=profile&uid={$mybb->user['uid']}">View Profile
</a></li>
<li><a href="#" onclick="MyBB.popupWindow('http://www.yoursite.com/misc.php?action=buddypopup', 'buddyList', 360, 460);">Buddy List </a></li>
<li class="thead" style="padding:3px; font-weight:bold;">Private Messages<br />
<li><a href="http://www.yoursite.com/private.php?fid=1">Inbox </a></li>
<li><a href="http://www.yoursite.com/private.php?fid=2">Outbox </a></li>
</ul>
</div>

Now you can have a beautiful Mouse Hover Menu in welcome block with many links.

See how it looks like:
[Image: ddvvxx.png]

Demo: you need to register and login to see it !!!!!

Hope this helps a lot of users,and be seen in many communities.

Thank you.

Note: This tutorial is copy righted for mybbstar,to post in other communities just contact the author,me
Reply
#2
Thanks, !!!
Reply
#3
Thanks envira! Love your Themes! Smile
Reply


Possibly Related Threads...
Thread Author Replies Views Last Post
  [TUT] Converting plugins from 1.4 to 1.6 Lin 17 11,990 Jan 27, 2015, 10:01 AM
Last Post: L34XXOR
  Tabbed Menu plugin Error Dredd 0 1,845 Dec 20, 2014, 12:05 PM
Last Post: Dredd
  Tabbed Menu 2.0.2 antigeek 5 2,928 Apr 10, 2014, 05:36 PM
Last Post: platinlig38
  Tabbed Menu ? GBLTeam 13 5,664 Jul 03, 2013, 11:06 AM
Last Post: RA4W
  Tabbed Menu v2.0.2 michalrudas007 6 2,535 Jan 29, 2013, 09:18 PM
Last Post: Seamus

Forum Jump:


Users browsing this thread: 1 Guest(s)