2013 December 28 Archive - EXEIdeas

As everyone want to make his blog more awesome as it is and want to give it a premium look so here we are also working on it to share some awesome widgets that can help you to make your blog more awesome. So this time here we are with a stylish coloured menu bar that will show different colour on each menu item and on hove will give you a sliding effect that will make it more attractive.So as our all widgets have awesome features so this time its also have a list of best listed features so without any more preface, have a look on live DEMO then check out our list of features then proceed to the code that is easy to add and customize with full features and function. #Demo {padding: 5px;border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px; background:#F8F8F8; box-shadow: 3px 3px 3px #D44B2C; width:200px; } #Demo{margin-bottom:5px;} #Demo a{color:#D44B2C;background:#F8F8F8;padding:8px 14px;display:inline-block;font-size:12px;line-height:12px;text-decoration:none;text-transform:uppercase;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px} #Demo a:hover{color:#fff;text-shadow:0px 1px 0px #000;background:#D44B2C;text-decoration:none} CLICK HERE TO SEE DEMOFeatures:1.) Stylish And Awesome In Design.2.) Pure HTML-CSS Codes.3.) Quick To Load And Easy To Install.4.) SEO Supported.5.) Hover Effect Enabled.6.) Multi-Colour Menus.7.) Best For Single Line Navigation.8.) Fully Customizable.9.) Can Add More Menus.10.) Short Code And Clean In Design.How To Add In Blogspot?1.) Go To Your www.blogger.com2.) Open Your Desire “Blog“.3.) Go To “Template“.4.) Click “Edit HTML“.5.) Now Click Within Code Box.6.) Press [CTRL+F] To Search Code.7.) Now Copy The Below Code And Paste It Before Code..8.) Click “Save Template” And Done.How To Add In Website?1.) Just Go To Your HTML File.2.) Now Copy The Below Code And Paste It Between “ “.3.) Save It, Now You Are Done. /*-----------------------------------------------MultiColor Menu Bar CSS----------------------------------------------- */#nav {width: auto;display: block;height: 65px;background: url(https://lh3.googleusercontent.com/-dKlirHGyVZw/UproL42RSWI/AAAAAAAAJv0/ZyUiIih9E7U/s65/MenuBar.png);-webkit-box-shadow: 0px 6px 10px #282c2e;-moz-box-shadow: 0px 6px 10px #282c2e;box-shadow: 0px 6px 10px #282c2e;} #nav li {list-style: none;height: 44px;float:left;padding:10px 5px;margin-left: -10px;}#nav li a {color: #fff;width: 100px;height: 40px;line-height: 53px;border-bottom: 4px solid #636393;padding:0px;font-size:18px;font-weight:lighter;text-align:center;text-decoration: none;display: block;-webkit-transition: .2s all linear;-moz-transition: .2s all linear;-o-transition: .2s all linear;transition: .2s all linear;}#nav li:nth-child(1) a {border-color: #636393;}#nav li:nth-child(2) a {border-color: #B5222D;}#nav li:nth-child(3) a {border-color: #D4953C;}#nav li:nth-child(4) a {border-color: #609491;}#nav li:nth-child(5) a {border-color: #87A248;}#nav li:nth-child(6) a {border-color: #4099FF;}#nav li:nth-child(7) a {border-color: #d34836;}#nav li:nth-child(8) a {border-color: #3B5998;}#nav li:nth-child(9) a {border-color: #4875B4;}#nav li:nth-child(10) a {border-color: #910101;}#nav li:nth-child(11) a {border-color: #FF6600;}#nav li:nth-child(1) a:hover {border-bottom: 35px solid #636393;height: 9px;}#nav li:nth-child(2) a:hover {border-bottom: 35px solid #B5222D;height: 9px;}#nav li:nth-child(3) a:hover {border-bottom: 35px solid #D4953C;height: 9px;}#nav li:nth-child(4) a:hover {border-bottom: 35px solid #609491;height: 9px;}#nav li:nth-child(5) a:hover {border-bottom: 35px solid #87A248;height: 9px;}#nav li:nth-child(6) a:hover {border-bottom: 35px solid #4099FF;height: 9px;}#nav li:nth-child(7) a:hover {border-bottom: 35px solid #d34836;height: 9px;}#nav li:nth-child(8) a:hover {border-bottom: 35px solid #3B5998;height: 9px;}#nav li:nth-child(9) a:hover {border-bottom: 35px solid #4875B4;height: 9px;}#nav li:nth-child(10) a:hover {border-bottom: 35px solid #910101;height: 9px;}#nav li:nth-child(11) a:hover {border-bottom: 35px solid #FF6600;height: 9px;} Home Plans Blog FAQs News Videos Gallery Portfolio Services About Contact Customization:Change Menu Text And Links As Your Desire. If You Want To Add More Menus Then Feel Free To Add It And If Having Problems, We Are Here To Help You.Last Words:That’s it what we have. Now if you liked this then use it and leave your feedback in comment and don’t forget to share this with your friends too. If you have any query related to this menu bar then feel free to ask more.