Welcome Guest ! Please   Login or Register

Check out our latest Premium Themes, Majestic , Majestic - Dark and Musk Themes for MyBB 1.8 Click to Shop Now

Now open for Custom Theme requests : Click to Order Now

Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
1.8 MyBB jQuery User Dropdown Menu with Font Icons and jQuery

envira Offline
Doctor Web

Posts: 1,231
Joined: Aug 2012
Likes Received : 306

Facebook Google Plus Twitter
Nationality: India

Mood: Lazy

Points: 23,002.06Points
Post: #1
Star MyBB jQuery User Dropdown Menu with Font Icons and jQuery

[Image: zXwUhzP.png]

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.


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">
        <li><a href="http://www.myskins.org"><i class="fa fa-user"></i> User CP</a></li>
        <li><a href="http://www.myskins.org"><i class="fa fa-envelope"></i> Inbox</a></li>
        <li><a href="http://www.myskins.org"><i class="fa fa-users"></i> Buddy List</a></li>
        <li><a href="http://www.myskins.org"><i class="fa fa-power-off"></i> Logout</a></li>

Note : You need to do some HTML edits in your welcomeblock template so that you could adjust this dropdown without interfering the other code.


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;
    line-height: 50px;

Note: You can modify the colors, width, position, font styles using the css. So its your game play now Smile


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.

jQuery(document) .ready(function() {    
$('.enmenu').on('click', function(){
        return false;
    $('html, body').on('click',function(){

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.


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 Smile
Happy Coding,

[Image: lt79ucY.png]
(This post was last modified: 07-07-2015 08:05 AM by envira.)
07-07-2015 12:29 AM

Possibly Related Threads...
Thread: Author Replies: Views: Last Post
Smile Some MyBB Useful Codes that you can use in your templates envira 13 10,557 07-21-2017 04:49 AM
Last Post: Zinx001
Star Simple jQuery Drop Down Login Form tutorial for MyBB envira 40 10,983 11-29-2016 08:50 PM
Last Post: DmitriyCauct
Information Add Social Links to Your MyBB Forum envira 5 5,306 10-25-2016 01:08 AM
Last Post: Chub
  [1.8x] [How] MyBB Reputation Gabbar 0 820 10-29-2015 09:41 AM
Last Post: Gabbar
  [1.8x] Add User Title HTML Vinny 2 1,098 10-23-2015 02:28 AM
Last Post: Professor X
Heart Global Tool Tips with Jquery for Mybb myskins 6 4,950 09-06-2014 07:42 PM
Last Post: Yorne
  Forum Hover Effect on MyBB Index Page envira 8 5,415 08-17-2014 11:59 PM
Last Post: !!!a
Smile Multiple Colored Category Headings/ Thead MyBB envira 9 5,410 07-20-2014 06:47 PM
Last Post: VetFalco
  How To Create Free MyBB-Based Forum. Jero 15 4,298 07-20-2014 06:44 PM
Last Post: VetFalco
Smile Tutorial to make 4 column footer for MyBB envira 9 6,361 07-20-2014 06:43 PM
Last Post: VetFalco

Forum Jump:

User(s) browsing this thread: 1 Guest(s)

About Myskins

MySkins Studio is MyBB Themes Resource Website.

At MySkins Studio, We procreate MyBB Themes both custom MyBB Themes and premium Mybb Themes.We believe in quality and assure you the best MyBB themes at a very reasonable price , that suits your taste.

Feel free to drop in a request and get a quote.