The objective of the tutorial:
1. Create a vertical menu slider using CSS3 transitions.
2. Create multiple levels of menus under the main menu layout.
IMPORTANT:
If you are trying it on Blogger>>>>Backup the template before proceeding.
Tutorial to implement CSS3 Menu Slider:
HTML Markup:
<div class="slider">
<span id="root"></span>
<span id="parent1"></span>
<span id="parent2"></span>
<span id="parent3"></span>
<span id="child1"></span>
<span id="child2"></span>
<span id="subchild1"></span>
<div id="tabs">
<dl>
<dd>
<a class="fwd" href="#parent1">Parent #1</a>
<a class="fwd" href="#parent2">Parent #2</a>
<a class="fwd" href="#parent3">Parent #3</a>
</dd>
</dl>
<dl class="parent1">
<dd>
<a class="fwd" href="#child1">Child #1#1</a>
<a class="fwd" href="#child2">Child #1#2</a>
<a href="#">Child #1#3</a>
<a href="#">Child #1#4</a>
<a href="#">Child #1#5</a>
</dd>
<dd><a href="#root">Back</a></dd>
</dl>
<dl class="parent2">
<dd>
<a href="#">Child #2#1</a>
<a href="#">Child #2#2</a>
<a href="#">Child #2#3</a>
<a href="#">Child #2#4</a>
<a href="#">Child #2#5</a>
</dd>
<dd><a href="#root">Back</a></dd>
</dl>
<dl class="parent3">
<dd>
<a href="#">Child #3#1</a>
<a href="#">Child #3#2</a>
<a href="#">Child #3#3</a>
<a href="#">Child #3#4</a>
<a href="#">Child #3#5</a>
</dd>
<dd><a href="#root">Back</a></dd>
</dl>
<dl class="child1">
<dd>
<a class="fwd" href="#subchild1">SubChild #1#1</a>
<a href="#">SubChild #1#2</a>
<a href="#">SubChild #1#3</a>
<a href="#">SubChild #1#4</a>
<a href="#">SubChild #1#5</a>
</dd>
<dd><a href="#parent1">Back</a></dd>
</dl>
<dl class="child2">
<dd>
<a href="#">SubChild #2#1</a>
<a href="#">SubChild #2#2</a>
<a href="#">SubChild #2#3</a>
<a href="#">SubChild #2#4</a>
<a href="#">SubChild #2#5</a>
</dd>
<dd><a href="#parent1">Back</a></dd>
</dl>
<dl class="subchild1">
<dd>
<a href="#">Links #1</a>
<a href="#">Links #2</a>
<a href="#">Links #3</a>
</dd>
<dd><a href="#child1">Back</a></dd>
</dl>
</div>
</div>
CSS3 Code:
.slider {
background-color: #fff;
border: 1px solid #000000;
margin: 50px auto;
overflow: hidden;
padding: 10px;
position: relative;
width: 200px;
border-radius:10px;
-moz-border-radius:10px;
-ms-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0px 0px 4px rgba(0,0,0,5) inset, 0px 0px 0px 4px rgba(31,31,102,0.5);
-moz-box-shadow:0px 0px 4px rgba(0,0,0,5) inset, 0px 0px 0px 4px rgba(31,31,102,0.5);
-webkit-box-shadow:0px 0px 4px rgba(0,0,0,5) inset, 0px 0px 0px 4px rgba(31,31,102,0.5);
}
}
.slider span {
display:none
}
#tabs {
background-color: #FFFFFF;
margin-left: 0;
overflow: hidden;
width: 2000px;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;
}
#tabs dl {
float: left;
height: 300px;
margin: 0;
opacity: 10;
padding: 0;
position: relative;
width: 200px;
}
#tabs dl:first-child {
opacity:1;
}
#tabs dl dd a.fwd {
background-color:#C8CEFF;
}
#tabs dl dd a {
background-color: #F4F5FE;
color: #000000;
display: block;
font-size: 18px;
line-height: 32px;
margin: 10px;
text-align: center;
text-decoration: none;
border-radius:10px;
-moz-border-radius:10px;
-ms-border-radius:10px;
-o-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1);
-moz-box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1);
-ms-box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1);
-o-box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1);
-webkit-box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1);
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
}
#tabs dl dd:first-child {
height: 250px;
overflow: auto;
border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
-webkit-border-radius:5px;
}
#tabs dl dd a:hover {
background:#ffa6b8;
box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5);
-moz-box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5);
-webkit-box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5);
}
#root:target ~ #tabs {
margin-left:0;
}
#parent1:target ~ #tabs {
margin-left:-200px;
}
#parent2:target ~ #tabs {
margin-left:-400px;
}
#parent3:target ~ #tabs {
margin-left:-600px;
}
#child1:target ~ #tabs {
margin-left:-800px;
}
#child2:target ~ #tabs {
margin-left:-1000px;
}
#subchild1:target ~ #tabs {
margin-left:-1200px;
}
#parent1:target ~ #tabs .parent1 {
opacity:1;
}
#parent2:target ~ #tabs .parent2 {
opacity:1;
}
#parent3:target ~ #tabs .parent3 {
opacity:1;
}
#child1:target ~ #tabs .child1 {
opacity:1;
}
#child2:target ~ #tabs .child2 {
opacity:1;
}
#subchild1:target ~ #tabs .subchild1 {
opacity:1;
}
That's it, you are done!! You can try it on your site and enjoy. This is going to save you lots of space on your site because your site's complete categories and sitemap can be got into one simple menu container. Thanks for reading and do look at other interesting tutorials on this site.
Confused? Feel free to ask
0 comments:
Post a Comment