CSS3 slideout menu tutorial. This is our fifth CSS3 menu. This will nice slideout menu with fading images (animated with transition effects). Make attention, that all these new effects (transitions) will work only in most fresh browsers like FF, Chrome, Safary browsers (possible in Opera too). But not in IE (transitions still not available here). I just added few hacks for IE – so menu will work here too (but not so smooth). Anyway – lets test our new menu.
Here are final result (what we will creating):
Here are samples and downloadable package:
Live Demo
[sociallocker]
download in package
[/sociallocker]
Ok, download our example files (package) and lets start making this menu!
Step 1. HTML
Here are html source of our menu. As you can see – here we can assign URL, title, and description to each link.
index.html
01 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
02 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> |
03 | <head> |
04 | <link rel="stylesheet" href="css/style.css" type="text/css" media="all"> |
05 | <title>CSS3 slideout menu #5</title> |
06 | </head> |
07 | <body> |
08 | <div class="example"> |
09 | <ul class="nav"> |
10 | <li> |
11 | <!--[if lte IE 6]><a class="ie6" href="#url"><table><tr><td><![endif]--> |
12 | <ul class="sub"> |
13 | <li><a href="https://www.script-tutorials.com/"><b>Home</b><p>custom description here</p><i></i></a></li> |
14 | <li><a href="https://www.script-tutorials.com/category/html-css/"><b>Tutorials</b><p>custom description here</p><i></i></a></li> |
15 | <li><a href="https://www.script-tutorials.com/category/resources/"><b>Resources</b><p>custom description here</p><i></i></a></li> |
16 | <li><a href="https://www.script-tutorials.com/about/"><b>About</b><p>custom description here</p><i></i></a></li> |
17 | <li><a href="https://www.script-tutorials.com/creating-css3-slideout-menu-5/"><b>Back</b><p>custom description here</p><i></i></a></li> |
18 | </ul> |
19 | <!--[if lte IE 6]></td></tr></table></a><![endif]--> |
20 | </li> |
21 | </ul> |
22 | <div style="clear:both"></div> |
23 | </div> |
24 | </body> |
25 | </html> |
Step 2. CSS
Here are used CSS styles. First two selectors (you can skip it) belong to our demo page. All rest – menu #5 styles.
css/style.css
001 | /* demo page styles */ |
002 | body { |
003 | background:#eee; |
004 | margin:0; |
005 | padding:0; |
006 | font-family: "Trebuchet MS",Arial,Helvetica,sans-serif; |
007 | } |
008 | .example { |
009 | position:relative; |
010 | background:#fff url(../images/background.jpg); |
011 | width:650px; |
012 | height:382px; |
013 | border:1px #000 solid; |
014 | margin:20px auto; |
015 | border-radius:3px; |
016 | -moz-border-radius:3px; |
017 | -webkit-border-radius:3px; |
018 | } |
019 | /* main menu styles */ |
020 | ul.nav { |
021 | list-style:none; |
022 | height:120px; |
023 | margin:0; |
024 | padding:0; |
025 | } |
026 | ul.nav table { |
027 | border-collapse:collapse; |
028 | width:0; |
029 | height:0; |
030 | margin:-1px 0 -5px -1px; |
031 | } |
032 | ul.nav > li { |
033 | float:right; |
034 | height:120px; |
035 | width:40px; |
036 | position:relative; |
037 | overflow:hidden; |
038 | -webkit-transition-duration:.5s; |
039 | -moz-transition-duration:.5s; |
040 | -o-transition-duration:.5s; |
041 | } |
042 | * html ul.nav > li { |
043 | width:auto; |
044 | } |
045 | ul.nav > li a.ie6 { |
046 | float:left; |
047 | height:120px; |
048 | width:39px; |
049 | position:relative; |
050 | overflow:hidden; |
051 | } |
052 | ul.sub { |
053 | list-style:none; |
054 | height:120px; |
055 | width:600px; |
056 | background:url(../images/panel.png) no-repeat right top; |
057 | position:absolute; |
058 | left:0; |
059 | top:0; |
060 | margin:0; |
061 | padding:0; |
062 | } |
063 | ul.sub li { |
064 | float:left; |
065 | } |
066 | ul.sub li:first-child { |
067 | margin-left:45px; |
068 | } |
069 | ul.sub li a { |
070 | display:block; |
071 | width:110px; |
072 | height:120px; |
073 | float:left; |
074 | overflow:hidden; |
075 | position:relative; |
076 | text-decoration:none; |
077 | color:#000; |
078 | } |
079 | ul.sub li a b { |
080 | font-weight:700; |
081 | display:block; |
082 | padding:15px 15px 5px; |
083 | } |
084 | ul.sub li a p { |
085 | font-size:12px; |
086 | display:block; |
087 | margin:0; |
088 | padding:0 10px; |
089 | } |
090 | ul.sub li a i { |
091 | display:block; |
092 | width:64px; |
093 | height:64px; |
094 | position:absolute; |
095 | right:10px; |
096 | bottom:10px; |
097 | background:url(../images/post.png); |
098 | opacity:0.1; |
099 | filter:alpha(opacity = 10); |
100 | -webkit-transition-duration:.5s; |
101 | -moz-transition-duration:.5s; |
102 | -o-transition-duration:.5s; |
103 | } |
104 | ul.nav > li:hover { |
105 | width:600px; |
106 | } |
107 | ul.nav > li a.ie6:hover { |
108 | direction:ltr; |
109 | width:600px; |
110 | } |
111 | ul.sub li a:hover i { |
112 | opacity:1.0; |
113 | } |
Step 3. Images
Here are three images for our menu:
Live Demo
Conclusion
Today we made new nice menu (fifth), your comments and thanks are very welcomed. Good luck!
