In the Building A Navigation Menu With HTML5 and CSS Part 1 post we wrote a sample HTML of your web site main navigation menu. In this article we will now write the CSS styles needed to both position and address the overall look-and-feel of a vertical navigation typically displayed in a sidebar. Assuming, your sidebar is placed on the left of your web pages, we’ll accordingly assign the CSS ID #leftnav to the HTML element wrapping that navigation (<nav id=”leftnav”>….</nav>). Now comes the CSS style sheet.
Posts Tagged ‘navigation’
Building A Navigation Menu With HTML5 and CSS Part 1
April 13, 2012The navigation is one of the most import element of any web site. It can be positioned horizontally below your web site main header then duplicated on the page footer or maybe you decided to have a sidebar (left or right) to display you site navigation instead. The same HTML can be used in either case and CSS will take care of your specific choice of orientation. Here is the HTML of a typical navigation bar using HTML5 semantics: