Creating CSS3 Slideout Menu #5
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
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 |
020 | /* main menu styles */ |
021 | ul.nav { |
022 | list-style:none; |
023 | height:120px; |
024 | margin:0; |
025 | padding:0; |
026 | } |
027 |
028 | ul.nav table { |
029 | border-collapse:collapse; |
030 | width:0; |
031 | height:0; |
032 | margin:-1px 0 -5px -1px; |
033 | } |
034 |
035 | ul.nav > li { |
036 | float:right; |
037 | height:120px; |
038 | width:40px; |
039 | position:relative; |
040 | overflow:hidden; |
041 | -webkit-transition-duration:.5s; |
042 | -moz-transition-duration:.5s; |
043 | -o-transition-duration:.5s; |
044 | } |
045 |
046 | * html ul.nav > li { |
047 | width:auto; |
048 | } |
049 |
050 | ul.nav > li a.ie6 { |
051 | float:left; |
052 | height:120px; |
053 | width:39px; |
054 | position:relative; |
055 | overflow:hidden; |
056 | } |
057 |
058 | ul.sub { |
059 | list-style:none; |
060 | height:120px; |
061 | width:600px; |
062 | background:url(../images/panel.png) no-repeat right top; |
063 | position:absolute; |
064 | left:0; |
065 | top:0; |
066 | margin:0; |
067 | padding:0; |
068 | } |
069 |
070 | ul.sub li { |
071 | float:left; |
072 | } |
073 |
074 | ul.sub li:first-child { |
075 | margin-left:45px; |
076 | } |
077 |
078 | ul.sub li a { |
079 | display:block; |
080 | width:110px; |
081 | height:120px; |
082 | float:left; |
083 | overflow:hidden; |
084 | position:relative; |
085 | text-decoration:none; |
086 | color:#000; |
087 | } |
088 |
089 | ul.sub li a b { |
090 | font-weight:700; |
091 | display:block; |
092 | padding:15px 15px 5px; |
093 | } |
094 |
095 | ul.sub li a p { |
096 | font-size:12px; |
097 | display:block; |
098 | margin:0; |
099 | padding:0 10px; |
100 | } |
101 |
102 | ul.sub li a i { |
103 | display:block; |
104 | width:64px; |
105 | height:64px; |
106 | position:absolute; |
107 | right:10px; |
108 | bottom:10px; |
109 | background:url(../images/post.png); |
110 | opacity:0.1; |
111 | filter:alpha(opacity = 10); |
112 | -webkit-transition-duration:.5s; |
113 | -moz-transition-duration:.5s; |
114 | -o-transition-duration:.5s; |
115 | } |
116 |
117 | ul.nav > li:hover { |
118 | width:600px; |
119 | } |
120 |
121 | ul.nav > li a.ie6:hover { |
122 | direction:ltr; |
123 | width:600px; |
124 | } |
125 |
126 | ul.sub li a:hover i { |
127 | opacity:1.0; |
128 | } |
Step 3. Images
Here are three images for our menu:
Live Demo
https://www.script-tutorials.com/creating-css3-slideout-menu-5/
