Monday, July 9, 2012

How to create a CSS3 Menu using -moz-border-radius

10:08 PM    No comments
in this example I’ll explain how to create a menu with css that uses the propriety -moz-border-radius.
Demo work only on firefox.

DemoDownload

Code Html:

01<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02<html xmlns="http://www.w3.org/1999/xhtml">
03<head>
04<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05<title>CSS3 Radius Menu</title>
06</head>
07<body>
08 
09<div id="menu">
10    <ul id="firstmenu">
11        <li><a title="" href="#all" class="current">Home</a></li>
12        <li><a rel="graphicdesign" title="" href="#">Projects</a></li>
13        <li><a rel="prints" title="" href="#">Services</a></li>
14        <li><a rel="pweb" title="" href="#">About Us</a></li>
15        <li><a rel="experiments" title="" href="#">Tutorials</a></li>
16        <li><a rel="photography" title="" href="#">Contact Us</a></li>
17    </ul>
18</div>
19 
20<div id="menu">
21    <ul id="secondmenu">
22        <li><a title="" href="#all">Home</a></li>
23        <li><a rel="graphicdesign" title="" href="#" class="current">Projects</a></li>
24        <li><a rel="prints" title="" href="#">Services</a></li>
25        <li><a rel="pweb" title="" href="#">About Us</a></li>
26        <li><a rel="experiments" title="" href="#">Tutorials</a></li>
27        <li><a rel="photography" title="" href="#">Contact Us</a></li>
28    </ul>
29</div>
30 
31<div id="menu">
32    <ul id="thirdmenu">
33        <li><a title="" href="#all">Home</a></li>
34        <li><a rel="graphicdesign" title="" href="#">Projects</a></li>
35        <li><a rel="prints" title="" href="#" class="current">Services</a></li>
36        <li><a rel="pweb" title="" href="#">About Us</a></li>
37        <li><a rel="experiments" title="" href="#">Tutorials</a></li>
38        <li><a rel="photography" title="" href="#">Contact Us</a></li>
39    </ul>
40</div>
41 
42<div id="menu">
43    <ul id="fourthmenu">
44        <li><a title="" href="#all">Home</a></li>
45        <li><a rel="graphicdesign" title="" href="#">Projects</a></li>
46        <li><a rel="prints" title="" href="#">Services</a></li>
47        <li><a rel="pweb" title="" href="#" class="current">About Us</a></li>
48        <li><a rel="experiments" title="" href="#">Tutorials</a></li>
49        <li><a rel="photography" title="" href="#">Contact Us</a></li>
50    </ul>
51</div>
52 
53</body>
54</html>

Code CSS:

01#menu {
02    float:left;
03}
04ul#firstmenu li {
05    display:inline;
06    font-family:Arial,Helvetica,sans-serif;
07    font-size:0.8em;
08    padding-top:40px;
09}
10ul#firstmenu a
11{
12    padding:8px 8px 8px 8px;
13    text-decoration:none;
14    font-weight:bold;
15    color:#83129E;
16}
17ul#firstmenu a.current {
18     background-color:#DDDDDD;
19}
20ul#firstmenu a:hover, ul#firstmenu a.current {
21    -moz-border-radius:0 20px 20px 20px;
22    background-image:url("menu.jpg");
23    color:#FFFFFF;
24}
25 
26ul#secondmenu li {
27    display:inline;
28    font-family:Arial,Helvetica,sans-serif;
29    font-size:0.8em;
30    padding-top:40px;
31}
32ul#secondmenu a
33{
34    padding:8px 8px 8px 8px;
35    text-decoration:none;
36    font-weight:bold;
37    color:#b12ad4;
38}
39ul#secondmenu a.current {
40     background-color:#B0E137;
41}
42ul#secondmenu a:hover, ul#secondmenu a.current {
43    -moz-border-radius:0 20px 20px 20px;
44    background-image:url("menu2.jpg");
45    color:#b12ad4;
46}
47 
48ul#thirdmenu li {
49    display:inline;
50    font-family:Arial,Helvetica,sans-serif;
51    font-size:0.8em;
52    padding-top:40px;
53}
54ul#thirdmenu a
55{
56    padding:8px 8px 8px 8px;
57    text-decoration:none;
58    font-weight:bold;
59    color:#E227B6;
60}
61ul#thirdmenu a.current {
62     background-color:#B0E137;
63}
64ul#thirdmenu a:hover, ul#thirdmenu a.current {
65    -moz-border-radius:0 20px 20px 20px;
66    background-image:url("menu3.jpg");
67    color:white;
68}
69 
70ul#fourthmenu li {
71    display:inline;
72    font-family:Arial,Helvetica,sans-serif;
73    font-size:0.8em;
74    padding-top:40px;
75}
76ul#fourthmenu a
77{
78    padding:8px 8px 8px 8px;
79    text-decoration:none;
80    font-weight:bold;
81    color:black;
82}
83ul#fourthmenu a.current {
84     background-color:#B0E137;
85}
86ul#fourthmenu a:hover, ul#fourthmenu a.current {
87    -moz-border-radius:0 20px 20px 20px;
88    background-image:url("menu4.jpg");
89    color:black;
90}

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)