logo DevAnswer - Developers Answer

Multi Level Menu in CSS

28th October

Preview


Source Code
                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
/* reset */
* {
  margin: 0;
  padding: 0;
}
#wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
label {
  cursor: pointer;
}
label:focus {
  outline: none;
}
.menu {
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  width: 240px;
  height: 100%;
  transform: translate3d(-240px, 0, 0);
  transition: transform 0.35s;
}
.menu label.menu-toggle {
  position: absolute;
  right: -60px;
  width: 60px;
  height: 60px;
  line-height: 0px;
  display: block;
  padding: 0;
  text-indent: -9999px;
  background: #fff url(https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png) 50% 50%/25px 25px no-repeat;
}
.menu ul li > label {
  background: url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-right-b-128.png) 95% 50%/16px 16px no-repeat;
}
.menu ul li a, .menu ul li label {
  display: block;
  text-align: center;
  padding: 0 20px;
  line-height: 60px;
  text-decoration: none;
  color: #000;
}
.menu ul li a:hover, .menu ul li label:hover {
  color: #666;
}
/* hide inputs */          
.menu-checkbox {
  display: none;
}
/* hide navigation icon for sublabels */    
.menu .menu label.menu-toggle {
  background: none;
}

/* fade in checked menu */    
.menu-checkbox:checked + .menu {
  transform: translate3d(0, 0, 0);
}
/* for show */
html, body {
  height: 100%;
}
body {
  background: url(http://www.devanswer.com/img/tumblr.jpg) 50% 50%/cover;
}
p {
  margin-bottom: 15px;
}
#info {
  display: table;
  background: rgba(0, 0, 0, 0.4);
  height: 100%;
  width: 100%;
}
#info #info-content {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  font-size: 12px;
}
#info #info-content h1 {
  color: #fff;
  border: 3px solid #fff;
  text-align: center;
  background: rgba(0, 0, 0, 0.1);
  font-size: 22px;
  font-weight: normal;
  padding: 20px;
  margin: 10px;
  display: inline-block;
}
#info #info-content h1 strong {
  display: block;
  font-size: 26px;
}
</style>

</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div id="wrapper">
    <div id="info">
        <div id="info-content">
            <h1>Multi level <strong>CSS-only push menu</strong></h1>
            <p>&lt;noscript&gt;No javascript required&lt;/noscript&gt;</p>
        </div>
    </div>
    <input type="checkbox" id="menu" name="menu" class="menu-checkbox">
    <div class="menu">
        <label class="menu-toggle" for="menu"><span>Toggle</span></label>
        <ul>
            <li>
                <a href="#">Menu-1</a>
            </li>
            <li>
                <a href="#">Menu-2</a>
            </li>
            <li>
                <label for="menu-3">Menu-3</label>
                <input type="checkbox" id="menu-3" name="menu-3" class="menu-checkbox">
                <div class="menu">
                    <label class="menu-toggle" for="menu-3"><span>Toggle</span></label>
                    <ul>
                        <li>
                            <a href="#">Menu-3-1</a>
                        </li>
                        <li>
                            <label for="menu-3-2">Menu-3-2</label>
                            <input type="checkbox" id="menu-3-2" name="menu-3-2" class="menu-checkbox">
                            <div class="menu">
                                <label class="menu-toggle" for="menu-3-2"><span>Toggle</span></label>
                                <ul>
                                    <li>
                                        <a href="#">Menu-3-2-1</a>
                                    </li>
                                    <li>
                                        <a href="#">Menu-3-2-2</a>
                                    </li>
                                    <li>
                                        <label for="menu-3-2-3">Menu-3-2-3</label>
                                        <input type="checkbox" id="menu-3-2-3" name="menu-3-2-3" class="menu-checkbox">
                                        <div class="menu">
                                            <label class="menu-toggle" for="menu-3-2-3"><span>Toggle</span></label>
                                            <ul>
                                                <li>
                                                    <a href="#">Menu-3-2-3-1</a>
                                                </li>
                                                <li>
                                                    <a href="#">Menu-3-2-3-2</a>
                                                </li>
                                                <li>
                                                    <a href="#">Menu-3-2-3-3</a>
                                                </li>
                                                <li>
                                                    <a href="#">Menu-3-2-3-4</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#">Menu-3-2-4</a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a href="#">Menu-3-3</a>
                        </li>
                        <li>
                            <a href="#">Menu-3-4</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <label for="menu-4">Menu-4</label>
                <input type="checkbox" id="menu-4" name="menu-4" class="menu-checkbox">
                <div class="menu">
                    <label class="menu-toggle" for="menu-4"><span>Toggle</span></label>
                    <ul>
                        <li>
                            <a href="#">Menu-4-1</a>
                        </li>
                        <li>
                            <a href="#">Menu-4-2</a>
                        </li>
                        <li>
                            <a href="#">Menu-4-3</a>
                        </li>
                        <li>
                            <a href="#">Menu-4-4</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <label for="menu-5">Menu-5</label>
                <input type="checkbox" id="menu-5" name="menu-5" class="menu-checkbox">
                <div class="menu">
                    <label class="menu-toggle" for="menu-5"><span>Toggle</span></label>
                    <ul>
                        <li>
                            <a href="#">Menu-5-1</a>
                        </li>
                        <li>
                            <a href="#">Menu-5-2</a>
                        </li>
                        <li>
                            <a href="#">Menu-5-3</a>
                        </li>
                        <li>
                            <a href="#">Menu-5-4</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="#">Menu-6</a>
            </li>
        </ul>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>

</body>
</html>                        



Other Codes