Create smart website navigation with css

I have written a tutorial in the past on how to create a smart navigation with jQuery, fontAwesome and CSS. Now I am going to show you how you can achieve the same result with just CSS selectors and fontAwesome.

CSS3 has powerful selectors that infinitely expands the possibility of what developers can achieve with minimum effort.

A “Smart Navigation” is an example of what can be created with one of the selectors.

Will the navigation be smart?
Yes it will be a smart navigation! Because the links are targeted and styled based on their href attributes, the links will retain their corresponding icons. This method comes in handy If you are developing a website for a client and there is that possibility that the placement of the links may be reshuffled.

Let us get started:

  1. Create a blank fiddle on jsfiddle.net
  2. Go to [fontAwesome icon cheat sheet page] to get the CSS content value of the icons that will work for the links we have.
  3. Add the line of code below to the external resource provision on jsfiddle. You will find it on the left pane
  4. //maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css
    
  5. HTML – Replicate the block of HTML code below.
  6. <a href="home"> Home </a>
    <a href="services">Services</a>
    <a href="about">About</a>
    <a href="contact">Contact </a>
    
  7. CSS – Copy and add the CSS below to your fiddle. To better understand this tutorial, pay attention to the comments.
  8. /* Properties and values that the links have in common */
    a {
    	min-width: 90px;
    	height: 30px;
    	line-height: 30px;
    	text-decoration: none;
    	position: relative;
    	color: red;
    	display: inline-block;
    	font-family: calibri;
    	border: 4px solid red;
    	text-align: center;
    }
     
    
    /* Properties and values that the links’ before selectors have in common */
     a:before {
    	color: red;
    	font-family: fontAwesome;
    	position: relative;
    	margin-right: 5px;
    }
    
    
    /* Target href attribute value that contains the substring "home" */
    a[href*="home"]:before { content: "\f015"; } /* plug-in the appropriate icon content property value */
    
    /* Target href attribute value that contains the substring "services" */
    a[href*="services"]:before { content: "\f013"; } /* plug-in the appropriate icon content property value */
    
    /* Target href attribute value that contains the substring "about" */
    a[href*="about"]:before { content: "\f0eb"; } /* plug-in the appropriate icon content property value */
    
    /* Target href attribute value that contains the substring "contact" */
    a[href*="contact"]:before { content: "\f0e0"; } /* plug-in the appropriate icon content property value */
    
  9. Run the code to see the result.

See working and editable example here

With this method, the sub-string “home” can still be reached with ‘a[href*=”home”]’, even in the scenarios depicted below:

• hometalkOf
• uglyhome
• whathomethen

Note: The selector is case sensitive and will not work if the sequence of the sub-string’s spelling is broken.

That is it!
Click here for more powerful CSS selectors and examples on how you can use them.

Comments and suggestions are appreciated.

Leave a Reply