2015-07-06, 09:54 PM
Original Tutorial here : http://myskins.org/Thread-1-8-MyBB-jQuer...and-jQuery
Hello guys,
Its been so long since i have written a tutorial on any of the forums.
I have found a little time for myself and created a simple jQuery Dropdown menu which you guys can use on your forums for a better welcome block on your site.
The menu is simplest in form, which provides more scope for you to edit to your likes. The colors and description i have used is purely my choice and you can use any color that you find amusing, just by editing few lines of code.
So quickly into the tut.
HTML
First things first, we have to build the skeleton with simple HTML.
So here goes the HTML code of the menu we would like to build.
You need to add this code in your theme templates > header templates > header_welcomeblock_member template.
<div class="enmenuwrap">
<a class="enmenu" href="#"><i class="fa fa-cog"></i> Settings</a>
<div class="ensettings">
<ul>
<li><a href="{$mybb->settings['bburl']}/usercp.php"><i class="fa fa-user"></i> User CP</a></li>
<li><a href="{$mybb->settings['bburl']}/private.php"><i class="fa fa-envelope"></i> Inbox</a></li>
<li><a href="#" onclick="MyBB.popupWindow('{$mybb->settings['bburl']}/misc.php?action=buddypopup', null, true); return false;"><i class="fa fa-users"></i> Buddy List</a></li>
<li><a href="{$mybb->settings['bburl']}/member.php?action=logout&logoutkey={$mybb->user['logoutkey']}"><i class="fa fa-power-off"></i> Logout</a></li>
</ul>
</div>
</div>
Note : You need to do some HTML edits in your welcomeblock template so that you could adjust this dropdown without interfering the other code.
CSS
Now comes the css part of the tut.
just add this code at the bottom of the global.css
.enmenuwrap {
float: right;
display: inline-block;
position: relative;
}
.enmenu {
background: #F5F5F5;
display: inline-block;
padding: 0px 10px;
position: relative;
cursor: pointer;
height: 50px;
line-height: 50px;
color: #e04006;
text-decoration: none;
border-radius: 2px;
font-family: 'Trebuchet MS',Helvetica,Arial,sans-serif;
float: right;
}
.ensettings {
display: none;
position: absolute;
right: 0;
left: auto;
min-width: 150px;
background: #e04006;
color: #555;
top: 50px;
border-radius: 2px;
padding: 0;
margin: 0;
z-index: 999999;
font-family: 'Trebuchet MS',Helvetica,Arial,sans-serif;
box-shadow: 0px 0px 1px #ddd;
}
.ensettings::before {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
content: "";
position: absolute;
border-bottom: 5px solid #e04006;
top: -5px;
right: 10px;
float: right;
}
.ensettings ul {
padding: 0;
margin: 0;
}
.ensettings ul > li {
list-style: none;
padding: 0;
}
.ensettings ul > li > a {
text-decoration: none;
color: #FFF;
display: block;
padding: 0px 10px;
transition: all 0.2s ease-in-out;
font-size: 12px;
}
.ensettings ul > li > a:hover {
background: #FFF;
color: #e04006;
}
.ensettings ul > li > a > i {
float: right;
display:inline-block;
line-height: 50px;
}
Note: You can modify the colors, width, position, font styles using the css. So its your game play now
jQuery
And comes the final jQuery part.
As MyBB 1.8 supports jQuery to the core, you can just copy and paste the code at the bottom of your templates > ungrouped templates > headerinclude template.
<script>
jQuery(document) .ready(function() {
$('.enmenu').on('click', function(){
$('.ensettings').slideToggle('100');
return false;
});
$('html, body').on('click',function(){
$('.ensettings').slideUp('100');
});
$(".ensettings").click(function(e){
e.stopPropagation();
});
});
</script>Now, i have styled the menu with FontAwesome Icons to the dropdown menu.
So you have to add the fontawesome css, just a link to the css file in the header include.
so add this code too in your headerinclude template
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
And that completes the tutorial.
DEMO
Hmm, wait i didnt show you the demo right. Alright its here, just take a look.
Link : Click here
Hope you guys like the tut, and i wish you guys share it with your friends.
I would also like to request a link back if possible and anywhere you post the tut or use it on your site, just as a token of gratitude.
And thanks again for reading this. Hope it helps you.
Keep watching for more tuts
Happy Coding,
regards