Welcome to my blog :)

This is a site comprised of a personal collection of notes and information serving as a single reference place for examples, tips, codes, testing, instructions, workarounds and troubleshooting with a record of external links to help during web design or managing and maintaining mobile devices and PC. I'm not a novice nor an expert...just a LittleBitGeeky here on blogspot.com

Monday, September 1, 2014

Web Design: Slicemaker Pure CSS Accordion Menu


<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>An Creative CSS3 Vertical Menu Created by SliceMaker Soft</title>
<meta name="keywords" content="css3 vertical menu, creative css3 vertical menu, css3 vertical menu free download">
<meta name="description" content="This is a free CSS3 vertival menu created by SliceMaker Soft. You can free download this CSS3 vertical menu and then edit it for your own use.">

<link rel="stylesheet" type="text/css" href="http://www.w3cplus.com/demo/css3/base.css" media="all" />
<style type="text/css">
body {
background-color: #666;
}
.demo {
width: 200px;
height: 400px;
margin: 40px auto 0;
}
.menu > li {
line-height: 50px;
border-bottom: 1px solid #3d3d3d;
box-shadow: 0 1px 0 #888;
}
.menu > li:first-child {
border-top: 1px solid #3d3d3d;
box-shadow: 0 1px 0 #888,0 1px 0 #888 inset;
}
.menu a {
position: relative;
outline: 0;
display: block;
text-align: left;
color: #e5e5e5;
font-size: 18px;
text-shadow: 0 1px 1px #171717;
padding: 0 40px;
}
.menu a:hover {
text-decoration: none;
}
.menu > li > a:before,
.menu > li > a:after {
font-family: 'LigatureSymbols';
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
-webkit-font-feature-settings: "liga" 1, "dlig" 1;
-moz-font-feature-settings: "liga=1, dlig=1";
-ms-font-feature-settings: "liga" 1, "dlig" 1;
font-feature-settings: "liga" 1, "dlig" 1;
font-size: 26px;
}
.menu > li > a:before {
position: absolute;
left: 10px;
color: #e5e5e5;
text-shadow: inherit -1px 0 #fff,0 -2px 0 #1a1a1a,0 1px 2px #1a1a1a;
}
.menu > li > a:after {
position: absolute;
right: 10px;
color: #292929;
text-shadow: -1px 0 0 #050505,1px 0 0 #868686;
}
.menu > li:nth-child(1) > a:before{
content:"friend";
}
.menu > li:nth-child(2) > a:before{
content:"video";
}
.menu > li:nth-child(3) > a:before{
content:"paint";
}
.menu > li:nth-child(4) > a:before{
content:"android";
}
.menu > li > a:after{
content:"plus";
}
.menu ul {
line-height: 30px;
max-height: 0;
overflow: hidden;
-webkit-transition: max-height .5s linear;
  -moz-transition: max-height .5s linear;
transition: max-height .5s linear;
}
.menu ul a {
color: #000;
text-shadow: 0 1px 1px #848484;
font-size: 12px;
}
.menu ul a:hover {
color: #ccc;
text-shadow: 0 1px 0 #252525;
}
.menu li:target > a:after {
content: "minus";
}
.menu li:target ul {
max-height: 200px;
border-top: 1px solid #3d3d3d;
box-shadow: 0 1px 0 #888 inset;
}
@font-face {
    font-family: 'LigatureSymbols';
    src: url('font/LigatureSymbols-2.05.eot');
    src: url('font/LigatureSymbols-2.05.eot?#iefix') format('embedded-opentype'),
         url('font/LigatureSymbols-2.05.woff') format('woff'),
         url('font/LigatureSymbols-2.05.ttf') format('truetype'),
         url('font/LigatureSymbols-2.05.svg#LigatureSymbols') format('svg');
    font-weight: normal;
    font-style: normal;
}
</style>
</head>
<div class="wrap_top_nav">
<nav id="top_nav">

<a id="read" href="http://slicemaker.com/article_601.htm" target="_blank">Back to the related article to learn more and download the sample >></a>
</nav>
</div>
<div class="page">
<header id="header">
<hgroup class="white">
<h1>Free Download the CSS3 Vertical Menu</h1>
<h2><a href="http://www.slicemaker.com/">Copyright © SliceMaker Soft, Inc.</a>(Technical Support: <a href="mailto:support@slicemaker.com">support@slicemaker.com</a>)</h2>
<h2>You can free download the css3 vertical menu and then edit it to use it for your own website.</h2>
</hgroup>
</header>
<section class="demo">
<ul class="menu">
<li class="item1" id="one"><a href="#one">Friends </a>
<ul>
<li class="subitem1"><a href="#">Cute Kittens </a></li>
<li class="subitem2"><a href="#">Strange “Stuff” </a></li>
<li class="subitem3"><a href="#">Automatic Fails </a></li>
</ul>
</li>
<li class="item2" id="two"><a href="#two">Videos </a>
<ul>
<li class="subitem1"><a href="#">Cute Kittens </a></li>
<li class="subitem2"><a href="#">Strange “Stuff” </a></li>
<li class="subitem3"><a href="#">Automatic Fails </a></li>
<li class="subitem2"><a href="#">Strange “Stuff” </a></li>
<li class="subitem1"><a href="#">Cute Kittens </a></li>
<li class="subitem2"><a href="#">Strange “Stuff” </a></li>
</ul>
</li>
<li class="item3" id="three"><a href="#three">Galleries</a>
<ul>
<li class="subitem3"><a href="#">Automatic Fails</a></li>
</ul>
</li>
<li class="item5" id="five"><a href="#five">Robots</a>
<ul>
<li class="subitem1"><a href="#">Cute Kittens</a></li>
<li class="subitem2"><a href="#">Strange “Stuff”</a></li>
<li class="subitem3"><a href="#">Automatic Fails </a></li>
</ul>
</li>
</ul>
</section>

</div>
</body>
</html>

------------------------------------------

<!--SPECIAL VISUALS TAKEN OUT OF ORIGINAL CODE-->

<!DOCTYPE HTML>
<html lang="en-US">
<head>

<style>

.demo {
width: 100%; /*200px*/
height: 100%; /*400px*/
/*margin: 40px auto 0;*/
        background-color: #666;
}
.menu > li {
line-height: 50px;
border-bottom: 1px solid #3d3d3d;
box-shadow: 0 1px 0 #888;
        list-style-type: none; /*added to remove bullets*/
}
.menu > li:first-child {
border-top: 1px solid #3d3d3d;
box-shadow: 0 1px 0 #888,0 1px 0 #888 inset;
}
.menu a {
position: relative;
outline: 0;
display: block;
text-align: left;
color: #e5e5e5;
font-size: 18px;
text-shadow: 0 1px 1px #171717;
padding: 0 40px;
}
.menu a:hover {
text-decoration: none;
}
.menu ul li {list-style-type: none; /*added to remove bullets*/}

.menu > li > a:before,
.menu > li > a:after {
font-family: arial;
font-size: 26px;
}
.menu > li > a:before {
position: absolute;
left: 10px;
color: #e5e5e5;
text-shadow: inherit -1px 0 #fff,0 -2px 0 #1a1a1a,0 1px 2px #1a1a1a;
}
.menu > li > a:after {
position: absolute;
right: 10px;
color: #292929;
text-shadow: -1px 0 0 #050505,1px 0 0 #868686;
}

.menu > li > a:after{
content:"+";
}
.menu ul {
line-height: 30px;
max-height: 0;
overflow: hidden;
-webkit-transition: max-height .5s linear;
  -moz-transition: max-height .5s linear;
transition: max-height .5s linear;
}
.menu ul a {
color: #000;
text-shadow: 0 1px 1px #848484;
font-size: 12px;
}
.menu ul a:hover {
color: #ccc;
text-shadow: 0 1px 0 #252525;
}
.menu li:target > a:after {
content: "-";
}
.menu li:target ul {
max-height: 200px;
border-top: 1px solid #3d3d3d;
box-shadow: 0 1px 0 #888 inset;
}

</style>
</head>
<div class="wrap_top_nav">
<nav id="top_nav">

<a id="read" href="http://slicemaker.com/article_601.htm" target="_blank">Back to the related article to learn more and download the sample >></a>
</nav>
</div>
<div class="page">
<header id="header">
<hgroup class="white">
<h1>Free Download the CSS3 Vertical Menu</h1>
<h2><a href="http://www.slicemaker.com/">Copyright © SliceMaker Soft, Inc.</a>(Technical Support: <a href="mailto:support@slicemaker.com">support@slicemaker.com</a>)</h2>
<h2>You can free download the css3 vertical menu and then edit it to use it for your own website.</h2>
</hgroup>
</header>
<section class="demo">
<ul class="menu">
<li class="item1" id="one"><a href="#one">Friends </a>
<ul>
<li class="subitem1"><a href="#reqWordsForBlogger">Cute Kittens </a></li>
<li class="subitem2"><a href="#reqWordsForBlogger">Strange “Stuff” </a></li>
<li class="subitem3"><a href="#reqWordsForBlogger">Automatic Fails </a></li>
</ul>
</li>
<li class="item2" id="two"><a href="#two">Videos </a>
<ul>
<li class="subitem1"><a href="#reqWordsForBlogger">Cute Kittens </a></li>
<li class="subitem2"><a href="#reqWordsForBlogger">Strange “Stuff” </a></li>
<li class="subitem3"><a href="#reqWordsForBlogger">Automatic Fails </a></li>
<li class="subitem2"><a href="#reqWordsForBlogger">Strange “Stuff” </a></li>
<li class="subitem1"><a href="#reqWordsForBlogger">Cute Kittens </a></li>
<li class="subitem2"><a href="#reqWordsForBlogger">Strange “Stuff” </a></li>
</ul>
</li>
<li class="item3" id="three"><a href="#three">Galleries</a>
<ul>
<li class="subitem3"><a href="#reqWordsForBlogger">Automatic Fails</a></li>
</ul>
</li>
<li class="item5" id="five"><a href="#five">Robots</a>
<ul>
<li class="subitem1"><a href="#reqWordsForBlogger">Cute Kittens</a></li>
<li class="subitem2"><a href="#reqWordsForBlogger">Strange “Stuff”</a></li>
<li class="subitem3"><a href="#reqWordsForBlogger">Automatic Fails </a></li>
</ul>
</li>
</ul>
</section>

</div>
</body>
</html>
---------------------------------------------------
Posted by at
Labels: ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)