Code node-style navigation with HTML & CSS


Emulating the Quechua site, we highlight the use of and tags to structure its node-like navigation menu with pseudo elements to style



Distinctive menu design

Fans of the Quechua site will notice the neat node-like navigation menu found within the footer of each section. This combines some slick CSS transitions with pseudo-elements to form a line and bullet floating rollover menu. What’s more, the menu is formed on the page using HTML5’s <nav> tag and the <ul> unordered list element containing divs and links. To examine this principle, we’ll pick apart a simplified version!

The HTML structure

Using the <nav> tag to wrap a navigation element within your page, before using <ul> to define a LIST of links, makes semantic sense and observes good practice. To emulate the Quechua dot-line menu in simplified form, your HTML structure might look something like the following. Here we have six node list items, links and labels, separated by five line items:

001 <body>
002 <div class=”container”>
003 <nav id=”menu”>
004 <ul>
005 <li class=”node”>
006 <a href=”#”class=”link”>
007 <div class=”label”>Menu Item 1</div>
008 </a>
009 </li>
010 <li class=”line”></li>
011 … <!--Abbreviated, see full code-->
012 <li class=”node”>
013 <a href=”#” class=”link”>
014 <div class=”label”>Menu Item     6</div>
015 </a>
016 </li>
017 </ul>
018 </nav>
019 </div>
020 </body>

Contain styles

The first CSS classes are basically concerned with sizing and positioning anything that may contain <div> and <nav> elements to hold the menu in place. In this instance we want the container full width and towards the page bottom, while the menu part is centred using margin:

001.container {
002 position: absolute;
003 width: 100%;
004 bottom: 0;
005 left: 0;
006 padding-bottom: 100px;
007 overflow: hidden;
008 /*z-index if to sit above other     elements*/
009 }
010 #menu {
011 position: relative;
012 width: 666px;
013 height: 30px;
014 margin: auto;
015 }

Primary element styles

So now the styling of the actual elements starts with the node items, setting positioning and size. The label elements will actually be made invisible using opacities of zero, which will fade into fully opaque on node:hover using a transition. Use the pointer-events property too to prevent the label appearing on hover.

Lines either side

Both :before and :after pseudo elements are added to the #menu div to create the longer lines either side of the first and last nodes. The first line is then independently positioned using the left property to offset the position in front of the menu. We’ll also add node:hover classes for making dots and labels opaque.

Link pseudo elements

Again pseudo elements are placed :before and :after each link, this time to actually form the white rings and dots (greyed by opacity) for each item node. Border-radius at 50% is used to form the circular rings/dots and the content property uses empty quotes to force content and show the pseudo element:

001 .link:before {
002 /* Styles the white rings on each node */
003 position: absolute;
004 content: “”;
005 width: 25px;
006 height: 25px;
007 top: 0px;
008 left: 0px;
009 border: 3px solid #FFF;
010 border-radius: 50%;
011 }
012 .link:after {
013 /* Styles the dots within each node
015 position: absolute;
016 content: “”;
017 left: 8px;
018 top: 8px;
019 width: 15px;
020 height: 15px;
021 border-radius: 50%;
022 background-color: #FFF;
023 opacity: 0.4;
024 transition: opacity ease-in 0.3s;
025 }

Customise and extend

For brevity this example is a much reduced imitation of the Quechua design. The site itself adds further transitions and transforms to animate the menu into view and then adds subtle expanding effects. But the basic semantic <nav> structure and styling principles apply, so see if you can extend the idea in new and exciting ways!

Warning: file_get_contents( failed to open stream: HTTP request failed! HTTP/1.0 500 Internal Server Error in /var/www/html/ on line 9