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,233
Joined: Aug 2012
Likes Received : 299

Facebook Google Plus Twitter
Nationality: India

Mood: Lazy

Points: 61,202.30Points
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.

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.

Code:
<div class="enmenuwrap">
    <a class="enmenu" href="#"><i class="fa fa-cog"></i> Settings</a>
<div class="ensettings">
    <ul>
        <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>
    </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

Code:
.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 Smile

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.

Code:
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();
    });
});

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

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

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





Possibly Related Threads...
Thread: Author Replies: Views: Last Post
Information Add Social Links to Your MyBB Forum envira 3 3,756 09-25-2016 03:59 AM
Last Post: smash
Star Simple jQuery Drop Down Login Form tutorial for MyBB envira 12 6,366 09-05-2016 10:18 PM
Last Post: Petrmix
  [1.8x] [How] MyBB Reputation Gabbar 0 415 10-29-2015 09:41 AM
Last Post: Gabbar
  [1.8x] Add User Title HTML Vinny 2 613 10-23-2015 02:28 AM
Last Post: Professor X
Smile Some MyBB Useful Codes that you can use in your templates envira 11 7,883 07-07-2015 09:18 AM
Last Post: Unr34lity
Heart Global Tool Tips with Jquery for Mybb myskins 6 4,270 09-06-2014 07:42 PM
Last Post: Yorne
  How To Create Free MyBB-Based Forum. Jero 15 3,340 07-20-2014 06:44 PM
Last Post: VetFalco
Smile Tutorial to make 4 column footer for MyBB envira 9 4,985 07-20-2014 06:43 PM
Last Post: VetFalco
Heart Tutorial to make MyBB Tabbed Profiles/ Profile Tabs with jQuery envira 33 12,726 07-20-2014 06:18 PM
Last Post: VetFalco
Information Add Boxes to MyBB postbit User Details envira 4 5,283 04-10-2014 10:46 PM
Last Post: Dropkaz

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.