Create a Drop Down Menu in Welcome block Header

[envira]

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.
Just give a right click and download

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.

.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.memberblock{
margin:0;
padding:0
}

ul.memberblock li{
display:inline
}

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

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

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

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

ul.visitorblock li{
display:inline
}

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

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

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

#upanel {
    background: #cacaca;
    color: #fff;
    font-size: 11px;
    height: 24px;
}

note:
In #Panel{ you need to edit your background color
to find specific color use this site : www.0to255.com


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.

<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="{$mybb->settings['bburl']}/jscripts/anylinkcssmenu.js"></script>
<script type="text/javascript">anylinkcssmenu.init("anchorclass")</script>

<div id="upanel">
<ul class="memberblock">
<li><a href="#" class="anchorclass" rel="messages[click]">Messages/Posts <img src="{$theme['imgdir']}/down.gif" alt="Desplegable" width="11" height="8" /></a></li>
<li><a href="#" class="anchorclass" rel="communication[click]">Community <img src="{$theme['imgdir']}/down.gif" alt="Desplegable" width="11" height="8" /></a></li>
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help">MS Help </a></li>
</ul>
<ul class="memberblock" style="float: right;">
<li><a href="#" class="anchorclass" rel="controlpanel[click]">My Control Panel <img src="{$theme['imgdir']}/down.gif" alt="Desplegable" width="11" height="8" /></a></li>
<li><a href="#" class="anchorclass" rel="user[click]">{$mybb->user['username']}  <img src="{$theme['imgdir']}/down.gif" alt="Desplegable" width="11" height="8" /></a></li>
</ul>
</div>
<div id="messages" class="anylinkcss">
<ul>
<li class="thead" style="padding:3px; font-weight:bold;">Activity </li>
<li><a href="{$mybb->settings['bburl']}/search.php?action=getnew">New posts </a></li>
<li><a href="{$mybb->settings['bburl']}/search.php?action=getdaily">Todays posts </a></li>
</ul>
</div>
<div id="comunication" class="anylinkcss">
<ul>
<li class="thead" style="padding:3px; font-weight:bold;">Community </li>
<li><a href="{$mybb->settings['bburl']}/memberlist.php">Memberlist </a></li>
<li><a href="{$mybb->settings['bburl']}/showteam.php">Team </a></li>
<li><a href="{$mybb->settings['bburl']}/online.php">Online Now </a></li>
<li><a href="{$mybb->settings['bburl']}/online.php?action=today">Online Today </a></li>
</ul>
</div>
<div id="controlpanel" class="anylinkcss">
<ul>
<li class="thead" style="padding:3px; font-weight:bold;">Profile Settings</li>
<li><a href="{$mybb->settings['bburl']}/usercp.php">Control Panel </a></li>
<li class="thead" style="padding:3px; font-weight:bold;">My profile </li>
<li><a href="{$mybb->settings['bburl']}/usercp.php?action=profile">Edit Profile </a></li>
<li><a href="{$mybb->settings['bburl']}/usercp.php?action=avatar">Edit Avatar </a></li>
<li><a href="{$mybb->settings['bburl']}/usercp.php?action=editsig">Edit signature </a></li>
<li>{$modcplink}{$admincplink}</li>
</ul>
</div>
<div id="user" 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('{$mybb->settings['bburl']}/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="{$mybb->settings['bburl']}/private.php?fid=1">Inbox </a></li>
<li><a href="{$mybb->settings['bburl']}/private.php?fid=2">Outbox </a></li>
</ul>
</div>

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

demo added : www.enviradesign.co.cc (need to register to see the demo)

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

Thank you.

[lucasbytegenius]

403 error when I tried to download those two files

EDIT: Here's the web page with the links: http://www.dynamicdrive.com/dynamicindex...inkcss.htm

[envira]

huh sorry i forgot to mention it...the links are to be opened in new window using a right click.......

[lucasbytegenius]

huh sorry i forgot to mention it...the links are to be opened in new window using a right click.......

Ah I see. Also, you'll have to change the CSS code you posted to English, please, as it's not working on my English board

[envira]

huh,this works irrespective of language,i have tested on many forums.
I made this from my theme actually,but i tried on other themes too.

I think you edit the correct links,and important is replace the #panel in global.css ,as we added a #panel for drop down.

Hope this works now.

demo : click me

username : test
password : password

[lucasbytegenius]

huh,this works irrespective of language,i have tested on many forums.
I made this from my theme actually,but i tried on other themes too.

I think you edit the correct links,and important is replace the #panel in global.css ,as we added a #panel for drop down.

Hope this works now.

demo : click me

username : test
password : password

Well that's pretty cool I just don't like the square border around those menus.

[envira]

You can edit in the css ,so u can get a rounded bordered one like in mybbstar.com,where i added a css3 component,t get round borders.
also u can eit colors in anylinkcssmenu.css,so u can chose ur desired color.

[lucasbytegenius]

My suggestion is that you use the variable {$mybb->settings['bburl']} in place of http://www.yoursite.com in your tutorial. It would be a lot easier

[envira]

Yeah thanks for suggestion......i just used it for ease of understanding for basic members.
I will post a text link here with the bburl code

[envira]

changed the entire code and now you can have easy way to incorporate into your theme