Dropdown Navigation - Simple and Responsive (same as VoxGrid).

[_B_]

I used a tutorial I found on the MyBB website and just thought it would be nice to post it in here as it's quite good for this feature. I adjusted little bits of the css to fit on my site but it should be fairly straight forward. The original thread can be found here. While I did adjust the css slightly, the demo can be tried out on my site as the "mechanics" behind haven't been changed. Make sure to backup your templates before editing in case you mess it up.
Thank you to WallBB for this tutorial !

Add this code where you want the navigation to be (you need to be aware of the code that is currently your navigation).

<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>

responsive_menu.css and click write my own content.

.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
*/
.toggle, [id^="drop"] {

 

[BrolySSJ]

I will have to admit that this code does look very complicated compared to the other ones. Maybe it will help to have notes in teh code as well to help people to understand it.