Here we are with a CSS code that you know already if you are a pro or you have seen this many times in blogs and websites of single page. This menu bar is actually for anchors menu link that mean this menu bar will work on same pages links. This work is simple like if you fixed the menu bar in your single page side and when a use click on menu bar then he will be scroll to his clicked DIV but how he will be confirm that he is viewing the same DIV that he clicked?
For this purpose, there are many codes online using JavaScript and JQuery but her we have pure CSS2.0 that will make your visitor click link highlight until he will clicked on other link. You can fully customize that what CSS to shoe on that link where your visitor click. So now without any more preface, here first see the live DEMO and check out features list then garb the code and use it.
Table of Contents
Features:
1.) Pure HTML-CSS Code.
2.) No JQuery Or JavaScript.
3.) Simple And Light Coding.
4.) Cross Browser Compatibility.
5.) Fully Customizable.
6.) Quick To Load.
7.) Easy To Add.
8.) Work On Anchors Link Only.
9.) No Cookies Usage.
10.) No CSS3 Needed.
How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire “Blog“.
3.) Go To “Layout“.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT“
6.) Click “+” Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click “Save“, Now You Are Done.
How To Add In Website?
1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between “<body> </body>“.
3.) “Save” It, Now You Are Done.
<style type="text/css">
.navigation a {font-size:1.2em;display:inline-block;margin-top:20px;padding:8px 12px;color:#666666;font-weight:bold;text-decoration:none;}
.navigation a:hover{background:#29abe2;color:#fff;border-radius:5px;}
.navigation a.active{background:#29abe2;color:#fff;border-radius:5px;}
#navigation a .active-link{background:#29abe2;color:#fff;border-radius:5px;}
#page1:target, #page2:target, #page3:target, #page4:target, #page5:target{background:#29abe2;color:#fff;border-radius:5px;}
</style>
<div class="navigation" >
<a href="#page1" id="page1">Page1</a>
<a href="#page2" id="page2">Page2</a>
<a href="#page3" id="page3">Page3</a>
<a href="#page4" id="page4">Page4</a>
<a href="#page5" id="page5">Page5</a>
</div>
Customization:
Just Change Required DIV ID And Class As Per Your Need. Later You Can Add Your Desired CSS That You Want On Links While They Will Be Click At Italic Lines IN The Upper Codes. If You Need To Customize More, Feel Free To Contact Us.
Again a amazing trick for newbie blogger and passionate bloggers. Keep it up muhammad brother. When we click on demo page there is only demo shows, no other widget of page look on your demo page. how you create this demo page. Please suggest.
Welcome Here And Thanks For Liking Our Code. Send Us An Email So We Will Share Our DEMO Blog Template Freely With You.