+- Sinisterly (https://sinister.ly)
+-- Forum: Design (https://sinister.ly/Forum-Design)
+--- Forum: Web Design (https://sinister.ly/Forum-Web-Design)
+--- Thread: CSS Dropdown Menus for your forum. (/Thread-CSS-Dropdown-Menus-for-your-forum)
CSS Dropdown Menus for your forum. - CrazyJ Cena - 05-06-2013
These days CSS dropdowns are quite an integral part of forums and themes. Mostly considered necessary in fact.
So I came up with this short little tutorial for you to make a CSS Dropdown. I will emphasize more on the CSS than the HTML, because I assume you know how to nest lists pretty well.
P.S: Transitions are included to make it look better.
The HTML
Here is a premade HTML list, all basic:
PHP Code:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustrator</a></li>
<li><a href="#">Web Design</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
The list is first included inside a new HTML5 tag "<nav>".
I have included Unordered Lists, Menus, Sub Menus, Sub-Sub menus so you can test out.
The CSS:
1. Lets get the most basic dropdown working:
PHP Code:
nav ul ul {
visibility:hidden;
opacity:0;
transition:visibility 0s linear 0.5s,opacity 0.5s linear;
}
nav ul li:hover > ul {
visibility:visible;
opacity:1;
transition-delay:0s;
}
Transitions are included right there. With CSS specificity and advanced selectors we can target individual elements buried deep in the HTML structure without the need for extra IDs or classes. First hide the sub menus by targeting any UL’s within a UL with the visibility:hidden; declaration. In order to make these menus reappear they need to be converted back to block elements on hover of the LI. The > child selector makes sure only the child UL of the LI being hovered is targeted, rather than all sub menus appearing at once.
2. Style the main navigation menu
PHP Code:
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
You can reduce the size of the main menu by reducing padding.
3. Style the submenus.
PHP Code:
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
They are currently inheriting styles from their parent elements, so a change of background and the removal of the border-radius and padding fixes their appearance. To make sure they fly out underneath the main menu they are positioned absolutely 100% from the top of the UL (ie, the bottom).
The LI’s of each UL in the sub menu don’t need floating side by side, instead they’re listed vertically with thin borders separating each one. A quick hover effect then darkens the background to act as a visual cue.
4. Position the sub-sub menus nicely.
PHP Code:
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
This will position the sub-sub menus along with their host sub-menu.
Remember, all of the CSS snippets are to be added one after the other so that everything functions.
If you want any help, please feel free to contact me via PM.
Live Demo
Credits:
Line25.com
RE: CSS Dropdown Menus for your forum. - Judas - 05-06-2013
Thanks for sharing, I'll definitely save this for later
