Monday, February 28, 2011

Round Cornered Navigation Menu without using Image-CSS


Mozilla CSS Extensions is a cool extension for designing attractive website, round corner box is one of the feature which allows you to add rounder corner to a div content or even a list item. I would like to add some of the CSS style using which a stylish Navigation Menu can be designed. This type of menu works fine in browsers like Mozilla Firefox, Opera and Chrome Browser. I have designed some 7 CSS here with id as ishumenu1, ishumenu2 and so on.
Mozilla CSS Extensions is a cool extension for designing attractive website, round corner box is one of the feature which allows you to add rounder corner to a div content or even a list item. I would like to add some of the CSS style using which a stylish Navigation Menu can be designed. This type of menu works fine in browsers like Mozilla Firefox, Opera and Chrome Browser. I have designed some 7 CSS here with id as ishumenu1, ishumenu2 and so on.

// Style 1
#ishumenu1 {padding: 0px 15px;list-style: none;height:25px;text-transform:uppercase;}
#ishumenu1 ul {margin: 0px;padding: 0px 5px;list-style: none;height:25px;}
#ishumenu1 a {color: #ffffff;display: block;font: 14px Georgia,Century gothic,verdana, Arial, sans-serif;text-decoration: none;}
#ishumenu1 a:hover {color: #56bb33;display: block;text-decoration: none; }
#ishumenu1 li {float: left;margin: 2px 5px;padding: 5px 10px 0px 10px;height:25px;border-radius:5px;-moz-border-radius:5px;background: #730948; -webkit-border-radius:5px;}
#ishumenu1 li:hover { background: #b13866;}
#ishumenu1 li:hover a { color: #ffffff;}

// Style 2
#ishumenu2 {padding: 0px 15px;list-style: none;height:25px;text-transform:uppercase;}
#ishumenu2 ul {margin: 0px;padding: 0px 5px;list-style: none;height:25px;}
#ishumenu2 a {color: #000000;display: block;font: 14px Georgia,Century gothic,verdana, Arial, sans-serif;text-decoration: none;}
#ishumenu2 a:hover {color: #56bb33;display: block;text-decoration: none; }
#ishumenu2 li {float: left;margin: 2px 5px;padding: 5px 10px 0px 10px;height:25px;border-radius:5px;-moz-border-radius:5px; -webkit-border-radius:5px;border:1px solid;}
#ishumenu2 li:hover { background: #b13866;}
#ishumenu2 li:hover a { color: #ffffff;}

// Style 3
#ishumenu3 {padding: 0px 15px;list-style: none;height:25px;text-transform:uppercase;}
#ishumenu3 ul {margin: 0px;padding: 0px 5px;list-style: none;height:25px;}
#ishumenu3 a {color: #000000;display: block;font: 14px Georgia,Century gothic,verdana, Arial, sans-serif;text-decoration: none;}
#ishumenu3 a:hover {color: #56bb33;display: block;text-decoration: none; }
#ishumenu3 li {float: left;margin: 2px 5px;padding: 5px 10px 0px 10px;height:25px;border-radius:5px;-moz-border-radius:5px; background: #ffffff;-webkit-border-radius:5px;}
#ishumenu3 li:hover { background: #a7a505;}
#ishumenu3 li:hover a { color: #ffffff;}

// Style 4
#ishumenu4 {padding: 0px 15px;list-style: none;height:25px;text-transform:uppercase;}
#ishumenu4 ul {margin: 0px;padding: 0px 5px;list-style: none;height:25px;}
#ishumenu4 a {color: #000000;display: block;font: 14px Georgia,Century gothic,verdana, Arial, sans-serif;text-decoration: none;}
#ishumenu4 a:hover {color: #56bb33;display: block;text-decoration: none; }
#ishumenu4 li {float: left;margin: 2px 5px;padding: 5px 10px 0px 10px;height:25px;border-radius:5px; -moz-border-radius:5px;-webkit-border-radius:5px;border:1px solid #ffffff;}
#ishumenu4 li:hover { border:1px solid #057fa7;}
#ishumenu4 li:hover a { color: #057fa7;}

// Style 5
#ishumenu5 {padding: 0px 15px;list-style: none;height:25px;text-transform:uppercase;}
#ishumenu5 ul {margin: 0px;padding: 0px 5px;list-style: none;height:25px;}
#ishumenu5 a {color: #000000;display: block;font: 14px Georgia,Century gothic,verdana, Arial, sans-serif;text-decoration: none;}
#ishumenu5 a:hover {color: #56bb33;display: block;text-decoration: none; }
#ishumenu5 li {float: left;margin: 2px 5px;padding: 5px 10px 0px 10px;height:25px;background: #f5a146;-webkit-border-radius:5px; -moz-border-radius: 10px 2px;border-radius: 10px 2px;} #ishumenu5 li:hover { background: #bb660b;}
#ishumenu5 li:hover a { color: #ffffff;}

// Style 6
#ishumenu6 {padding: 0px 15px;list-style: none;height:25px;text-transform:uppercase;}
#ishumenu6 ul {margin: 0px;padding: 0px 5px;list-style: none;height:25px;}
#ishumenu6 a {color: #ffffff;display: block;font: 14px Georgia,Century gothic,verdana, Arial, sans-serif;text-decoration: none;}
#ishumenu6 a:hover {color: #56bb33;display: block;text-decoration: none;}
#ishumenu6 li {float: left;margin: 2px 5px;padding: 5px 10px 0px 10px;height:25px;border-radius:10px 10px 0px 0px;-moz-border-radius:10px 10px 0px 0px;background: #047ecc;-webkit-border-radius:5px;}
#ishumenu6 li:hover { background: #8fd0f9;} #ishumenu6 li:hover a { color: #000000;}

// Style 7
#ishumenu7 {padding: 0px 15px;list-style: none;height:25px;text-transform:uppercase;}
#ishumenu7 ul {margin: 0px;padding: 0px 5px;list-style: none;height:25px;}
#ishumenu7 a {color: #ffffff;display: block;font: 14px Georgia,Century gothic,verdana, Arial, sans-serif;text-decoration: none;}
#ishumenu7 a:hover {color: #56bb33;display: block;text-decoration: none; }
#ishumenu7 li {float: left;margin: 2px 5px;padding: 5px 10px 0px 10px;height:25px;border-radius:0px 0px 10px 10px;-moz-border-radius:0px 0px 10px 10px;background: #047ecc;-webkit-border-radius:5px;}
#ishumenu7 li:hover { background: #8fd0f9;}
#ishumenu7 li:hover a { color: #000000;}

0 comments:

Post a Comment

 

Androidirsh Blogger Template Designed by TechIrsH