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: none 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]](https://img4.imageshack.us/img4/1489/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&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]](https://img684.imageshack.us/img684/8894/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
