[For 1.8] [Tutorial]Simple Responsive Dropdown Navigation Menu for MyBB

[WallBB]

Hey guys,
Just wrote a simple tutorial on adding responsive dropdown navigation menu in MyBB 1.8, thought I should share with you all.
Live Demo – http://codepen.io/WallBB/pen/bwwwBL
It is 3 step tutorial and easy to follow :-
Steps :-
1. First of all open the header template located at -> Admin CP > Templates and Styles > Templates > Your Theme Template > header Templates > header and add the below code just above

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
        <nav>
       <label for="drop" class="toggle"><i class="fa fa-bars" aria-hidden="true"></i> Menu</label>
       <input type="checkbox" id="drop" />
           <ul class="menu">
<li><a href="{$mybb->settings['bburl']}/index.php" class="Home"><span><i class="fa fa-home" aria-hidden="true"></i> Home</span></a></li>
<li><a href="{$mybb->settings['bburl']}/memberlist.php" class="Members"><span><i class="fa fa-user" aria-hidden="true"></i> Memberlist</span></a></li>
<li><a href="{$mybb->settings['bburl']}/search.php" class="Search"><span><i class="fa fa-search" aria-hidden="true"></i> Search</span></a></li>
               <li><a href="{$mybb->settings['bburl']}/advertise.php"><span><i class="fa fa-globe" aria-hidden="true"></i> Advertise</span></a></li> 
               <li>
                   <!-- First Tier Drop Down -->
                   <label for="drop-1" class="toggle">Dropdown <i class="fa fa-sort-desc" aria-hidden="true"></i></label>
                   <a href="#">Dropdown</a>
                   <input type="checkbox" id="drop-1"/>
                   <ul>
                       <li><a href="#">Links</a></li>
                       <li><a href="#">Links</a></li>
                       <li><a href="#">Links</a></li>
                   </ul> 
               </li>
               <li>
<li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help"><span><i class="fa fa-question"></i> {$lang->toplinks_help}</span></a></li>
           </ul>
</nav>

2. Go to your theme and click add stylesheet. Write the name as responsive_menu.css and click write my own content.
3. Paste the below content and click save stylesheet.

.toggle, [id^="drop"] {
   display: none;
}
nav {
   background: #333;
   margin: 0;
   padding: 0;
}
nav::after {
   clear: both;
   content: "";
   display: table;
}
nav ul {
   list-style: outside none none;
   margin: 0;
   padding: 0;
   position: relative;
}
nav ul li {
   border-left: 1px solid #555;
   display: inline-block;
   float: left;
   margin: 0;
}
nav a {
   background: #222;
   color: #fff;
   display: block;
   font-family: Helvetica,Arial,Verdana,sans-serif;
   font-size: 12px;
   padding: 10px 15px;
   text-decoration: none;
}
nav ul li ul li:hover {
   background: #444 none repeat scroll 0 0;
}
nav a:hover {
   background-color: #000000;
}
nav ul ul {
   display: none;
   position: absolute;
   top: 35px;
}
nav ul li:hover > ul {
   display: inherit;
}
nav ul ul li {
   display: list-item;
   float: none;
   position: relative;
   width: 170px;
}
nav ul ul ul li {
   left: 170px;
   position: relative;
   top: -60px;
}
nav ul li > a::after {
   content: " ";
   display: inline;
   font-family: fontawesome;
}
nav ul li > a:only-child::after {
   content: "";
}
@media all and (max-width: 768px) {
nav {
   margin: 0;
}
.toggle + a, .menu {
   display: none;
}
.toggle {
   background: #333;
   border: medium none;
   color: #ffffff;
   display: block;
   font-family: Helvetica,Arial,Verdana,sans-serif;
   font-size: 12px;
   padding: 10px 15px;
   text-decoration: none;
}
.toggle:hover {
   background-color: #000000;
}
[id^="drop"]:checked + ul {
   display: block;
}
nav ul li {
   display: block;
   width: 100%;
}
nav ul ul .toggle, nav ul ul a {
   padding: 0 40px;
}
nav ul ul ul a {
   padding: 0 80px;
}
nav a:hover, nav ul ul ul a {
   background-color: #000000;
}
nav ul li ul li .toggle, nav ul ul a, nav ul ul ul a {
   color: #ffffff;
   font-size: 12px;
   padding: 10px 15px;
}
nav ul li ul li .toggle, nav ul ul a {
   background-color: #212121;
}
nav ul ul {
   color: #ffffff;
   float: none;
   position: static;
}
nav ul ul li:hover > ul, nav ul li:hover > ul {
   display: none;
}
nav ul ul li {
   display: block;
   width: 100%;
}
nav ul ul ul li {
   position: static;
}
}
@media all and (max-width: 330px) {
nav ul li {
   display: block;
   width: 94%;
}
}
@media only screen and (min-width: 769px) {
nav ul {
   margin-left: 8%;
}
nav ul ul {
   margin-left: 0;
}
}

/* 
Tutorial by WallBB 
http://wallbb.co.uk
*/

Go to your live forum and you will see a responsive dropdown menu for MyBB forums something like these



Original Tutorial - http://wallbb.co.uk/simple-three-step-tu...bb-forums/

Hope it helps you get a responsive menu, in case of any questions just let me know.
Regards
WallBB

[Anka06]

nice tutorial thanks

[WallBB]

nice tutorial thanks

Thank you
Hope it is helpful

[Schrotti]

Responsive dropdown menus are a thing that MyBB really needs.
Currently it is still necessary to click through numerous pages with plethoras of dropdown boxes from HTML stone age to get simple things like egosearches done. This could be just a dropdown instead of three buttons, for example.

A exemplary veryyy bad example for the MyBB web design is the choice of the thread display mode in the upper right.
This could be a simple button leading to either linear/threaded.
But it is still implemented by the MyBB as dropdown which needs *two* clicks...   *sigh*
There are many other examples of such unergonomic things.

Regarding your CSS implementation there is one thing I don't know whether it is good. This CSS depends on externally hosted CSS file sets (https://maxcdn.bootstrapcdn.com/font-awe...me.min.css). This bears the risk that the forum is broken when this link goes down.

Maybe it is possible to develop a lean CSS that forum owners can host themselves?
Overhauling MyBB so that people have actually fun using it is really important.

So keep up your good work!  

[Nathan Malcolm]

A exemplary veryyy bad example for the MyBB web design is the choice of the thread display mode in the upper right.
This could be a simple button leading to either linear/threaded.
But it is still implemented by the MyBB as dropdown which needs *two* clicks... *sigh*
There are many other examples of such unergonomic things.

This was actually by design. In 1.6 there were two links which cluttered the table header. Threaded mode is an extremely old format which is only really used by mailing lists and perhaps one or two (custom coded) established forums. It's not good UX, and it will be removed in 2.0, hence why I hid it away. There's no point having a direct link to it. It's the same reason you don't see post subjects unless you hover over the date of the post. They still exist, but they're going to be removed in 2.0.

[WallBB]

Regarding your CSS implementation there is one thing I don't know whether it is good. This CSS depends on externally hosted CSS file sets (https://maxcdn.bootstrapcdn.com/font-awe...me.min.css). This bears the risk that the forum is broken when this link goes down.

Maybe it is possible to develop a lean CSS that forum owners can host themselves?
Overhauling MyBB so that people have actually fun using it is really important.

So keep up your good work!  

The above code for font-awesome is optional and you can actually remove it. I have written this in tutorial as well
Cheers

A exemplary veryyy bad example for the MyBB web design is the choice of the thread display mode in the upper right.
This could be a simple button leading to either linear/threaded.
But it is still implemented by the MyBB as dropdown which needs *two* clicks... *sigh*
There are many other examples of such unergonomic things.

This was actually by design. In 1.6 there were two links which cluttered the table header. Threaded mode is an extremely old format which is only really used by mailing lists and perhaps one or two (custom coded) established forums. It's not good UX, and it will be removed in 2.0, hence why I hid it away. There's no point having a direct link to it. It's the same reason you don't see post subjects unless you hover over the date of the post. They still exist, but they're going to be removed in 2.0.

I am eagerly waiting for 2.0, it is gonna be awesome by the looks till now.
Also I believe 1.8 is good and easy to modify as well.

[YeahIamBlond]

Very helpful tutorial. Thanks a lot!
I am trying to use for my site and have changed the colors slightly. However could you tell me how i can get rid of the black lines in between the menus?



many thanks

[WallBB]

Very helpful tutorial. Thanks a lot!
I am trying to use for my site and have changed the colors slightly. However could you tell me how i can get rid of the black lines in between the menus?



many thanks

I believe you have not added the css code and that is why there is an issue. Please add css and it will work fine

[Whiteneo]

A very important part to work with, nice tut buddie.

I think this have to be into default mybb skin because actually all sites and most of the codes are responsive or try it todo due Google restrictions.

+1

[WallBB]

A very important part to work with, nice tut buddie.

I think this have to be into default mybb skin because actually all sites and most of the codes are responsive or try it todo due Google restrictions.

+1

Thank you buddy.
1.9 will be responsive so I guess no need for this to be default