Targeting Menu Elements with Submenus in a Navigation Bar
Hey friends,
You might be aware of the jQuery .has method, which allows you to select an element if it has any of another selector as a descendant. There is sadly no such selector in CSS yet. But if you know a little something about the HTML structure, you can use a combination of positional selectors to mimic it. Ray will explain.
Recently, I was working on a dropdown navigation bar and wanted to differentiate the menu items which contained sub-menus from those that didn’t. I wanted to be able to do this automatically, without relying on JavaScript or having to add classes to the markup. I just wanted it to work as if the item just knew it had a submenu or not.
The Need for Navigational Hints
As you probably know, menus are lists of links and, as such, it is standard practice to mark them up as <ul>s. By extension, drop-down menus are merely nested <ul>s. Dropdowns are a common component of modern (and not so modern) web design. Using pure CSS, one can style the upper level of a navigation menu any which way, and hide the sub-levels so that they are revealed only when the visitor hovers on the appropriate area.
Many designers are satisfied with leaving like that. However, from a UX/UI point of view, this is lacking as it leaves the user having to explore the entire menu to find which sections contain additional navigation links. This means visitors will either waste their time looking and get frustrated for doing so or miss areas of your site altogether! That’s no good at all.
The common way to address this issue is to simply add a class to the <li>s that contain <ul>s (sub-menus) so that we can style those items differently from those that do not contain sub-navigation. Pretty simple, but also pretty tedious and not particularly graceful.
Another way, assuming that upper-level items are not coded as links, is to use that difference in tags as leverage. That is, create faux links: style <span>s that’s are direct children of the <li> to indicate that more links follow and, by contrast, style anchor tags as not having additional sub-items. This is handy if your drop-down is simple and you can structure it specifically that way. It’s cleaner in that you don’t have to add “submenu” classes to your markup but, just as before, it still requires that you structure the content of your list manually or that your CMS can foretell which list items will contain others as sub-mv
----------------------------------------------------------------------------------
HTMLCODE.
<nav>
<ul class="nav">
<li><a href="#">About</a></li>
<li>
<a href="#">Portfolio</a>
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
<li>
<a href="#">Resume</a>
<ul>
<li><a href="#">item a lonng submenu</a></li>
<li>
<a href="#">item</a>
<ul>
<li><a href="#">Ray</a></li>
<li><a href="#">Veronica</a></li>
<li><a href="#">Bushy</a></li>
<li><a href="#">Havoc</a></li>
</ul>
</li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
<li><a href="#">Download</a></li>
<li>
<a href="#">Rants</a>
<ul>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
----------------------------------------------------------------------------------
CSS CODE.
nav {
display: block;
text-align: center;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.nav a {
display: block;
background: #111;
color: #fff;
text-decoration: none;
padding: .8em 1.8em;
text-transform: uppercase;
font-size: 80%;
letter-spacing: 2px;
text-shadow: 0 -1px 0 #000;
position: relative;
}
.nav {
vertical-align: top;
display: inline-block;
box-shadow: 1px -1px -1px 1px #000, -1px 1px -1px 1px #fff, 0 0 6px 3px #fff;
border-radius: 6px;
}
.nav li {
position: relative;
}
.nav>li {
float: left;
border-bottom: 4px #aaa solid;
margin-right: 1px;
}
.nav>li>a {
margin-bottom: 1px;
box-shadow: inset 0 2em .33em -.5em #555;
}
.nav>li:hover,
.nav>li:hover>a {
border-bottom-color: orange;
}
.nav li:hover>a {
color: orange;
}
.nav>li:first-child {
border-radius: 4px 0 0 4px;
}
.nav>li:first-child>a {
border-radius: 4px 0 0 0;
}
.nav>li:last-child {
border-radius: 0 0 4px 0;
margin-right: 0;
}
.nav>li:last-child>a {
border-radius: 0 4px 0 0;
}
.nav li li a {
margin-top: 1px
}
.nav li a:first-child:nth-last-child(2):before {
content: "";
position: absolute;
height: 0;
width: 0;
border: 5px solid transparent;
top: 50%;
right: 5px;
}
/* submenu positioning*/
.nav ul {
position: absolute;
white-space: nowrap;
border-bottom: 5px solid orange;
z-index: 1;
left: -99999em;
}
.nav>li:hover>ul {
left: auto;
padding-top: 5px;
min-width: 100%;
}
.nav>li li ul {
border-left: 1px solid #fff;
}
.nav>li li:hover>ul {
/* margin-left: 1px */
left: 100%;
top: -1px;
}
/* arrow hover styling */
.nav>li>a:first-child:nth-last-child(2):before {
border-top-color: #aaa;
}
.nav>li:hover>a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
border-bottom-color: orange;
margin-top: -5px
}
.nav li li>a:first-child:nth-last-child(2):before {
border-left-color: #aaa;
margin-top: -5px
}
.nav li li:hover>a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
border-right-color: orange;
right: 10px;
}
----------------------------------------------------------------------------------
OUT-PUT.
----------------------------------------------------------------------------------------------
0 Comments