Menu is very important for a blog, with a menu where visitors can freely explore our blog. So how do we make the menu more attractive and pleasing to look at without losing its function as a bookmark blog. Here we will learn to create a menu where the menu will be floated after scrolling down the page, so the menu will continue to be at the top of the page though scrolled down. After yesterday we learn about how to customize Total Pageviews, and now we will learn about how to create fixed menu when scroolling. We will use CSS and Jquery to make some effects, you can edit this code and adjust the background color and make it fit with your blog. The jquery code use to change from the normal menu to fixed menu and fixed menu to the normal menu, so if the normal menu is used, fixed menu will not be used, and vice versa.How to create Fixed menu when scrolled down page1. Go to Blogger > Template > Edit HTML2. Backup your template3. Search ]]></b:skin>Click the black arrow to see all the css code4. And paste this code just above ]]></b:skin>/*----- Menu -----*/#ozg-menu{ margin-bottom:10px;}#ozg-menu ul{ list-style-type: none; padding: 0;}#ozg-menu ul li{ display: inline-block;}#ozg-menu ul li a{ display: inline-block; font-family: Electrolize, sans-serif; text-decoration: none; font-weight: normal; padding: 4px 6px 4px 6px; color: #fff;}#ozg-menu ul li a:hover{ color: #fff; border-bottom: 3px solid #99FF00; padding:4px 6px 1px 6px;}.menunormal{ padding: 4px 6px 4px 6px; background: #9F8A12;}/*----- Menu When Scroll -----*/.menufixed { position: fixed; top: -2px; left: 0; width: 100%; padding: 4px 6px 4px 6px; background: #0B7271; color: #f8f8f8; -webkit-transition: top 500ms ease 0s; -moz-transition: top 500ms ease 0s; -o-transition: top 500ms ease 0s; -ms-transition: top 500ms ease 0s; transition: top 500ms ease 0s; box-shadow: 0 0 45px #222; -webkit-box-shadow: 0 0 35px #222; -moz-box-shadow: 0 0 35px #222;}.menufixed ul{ width: 450px; margin: 0 auto;}5. And search </head> and paste this code just above </head><script src='http://oqzigen.googlecode.com/files/ozg-menu.js' type='text/javascript'/>6. And the last is to apply HTML code, copy this code and paste in the place that you want. If you want to add this menu at top in your blog you can add this code just below <body><nav> <div id="ozg-menu" class="normal"> <ul> <li><a href="ADD YOUR LINK">Home</a></li> <li><a href="ADD YOUR LINK">About</a></li> <li><a href="ADD YOUR LINK">Privacy Policy</a></li> <li><a href="ADD YOUR LINK">Services</a></li> <li><a href="ADD YOUR LINK">Contact</a></li> </ul> </div></nav>7. And save your templatedemoReplace ADD YOUR LINK with your link you want.Read this too :Add A Vertical Navigation CSS Menus To BloggerCreate Dropdown Menus Slide Animation For Blogger
