Print this pageKode yang Digunakan adalah :
<html>
<head>
<style type="text/css">
ul.dropMenu {
position: relative;
height:40px;
background:#000;
border-bottom:5px solid orange;
top:-45px}
.item-menu {
display: inline-block;
padding: 0;
height: 40px;
width:100%;
position: absolute}
.iconMenu {
display: block;
height: 40px;
width: 40px;
color:#fff;
line-height:40px;
text-indent: -999em;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkoVr2YDUMNae1DKL0c9jOBF7zy1OeKHiuyxCpXzrQLXGVhcqR7IL3ZfsvmMzBXsROGdbgOcR_2UIqZ3hkn3J2zjf6X13uryAZ0iUxJDG6TTnQwDSdDx2aaTZ7y085j3Blm3t993dtOQ0/s1600/icon.png) no-repeat 10px center;
margin-left:-40px}
ul.showMenu {
position: absolute;
left: -1200px;
top: 0;
width: 100%;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out}
.showMenu li {
background: rgba(0,0,0,0.0);
display: block;
height: 0;
-webkit-transition: all 0.95s ease-out;
-moz-transition: all 0.95s ease-out;
-o-transition: all 0.95s ease-out;
transition: all 0.95s ease-out}
a.close {font-size: 18px;font-style: italic}
ul.showMenu:target {left: 0}
.showMenu:target li:first-child {margin-top: 35px}
.showMenu:target li {
background: rgba(0,0,0,0.8);
float: left;
height: auto;
width: 100%;
margin: 0 0 1px -80px}
.showMenu:target li a {
display: block;
padding: 10px 15px;
color: orange;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out}
.showMenu:target li a:hover {
padding: 10px 15px 10px 25px;
background:rgba(234,153,153,.9);
color:#fff}
p {margin-top:-60px}
.menuTitle {
color:#fff;
display:block;
position:absolute;
left:50px;
line-height:40px;
font-weight:bold;}
.close span {
background:red;
color:#fff;
width:10px;
border-radius:50%;
font:bold 15px/normal Verdana,serif;
padding:0 2px;
box-shadow:1px 1px 1px #111;
text-shadow:1px 1px 2px #111;}
</style>
</head>
<body>
<br />
<nav><br />
<ul class="dropMenu"><div class="menuTitle">SHOW MENU</div><li class="item-menu"><a href="#showMenu" class="iconMenu" title="Show Menu">Menu</a><br />
<ul id="showMenu" class="showMenu"><li><a href="#" target="_blank">Isi Sendiri</a></li>
<li><a href="#" target="_blank">Isi Sendiri</a></li>
<li><a href="#" target="_blank">Isi Sendiri</a></li>
<li><a href="#" target="_blank">Isi Sendiri</a></li>
<li><a href="#" target="_blank">Isi Sendiri</a></li>
<li><a href="#" class="close"><span>×</span> Menu Close</a></li>
</ul></li>
</ul></nav>
</body>
</html>
Artikel Terkait
A M A R A J E N
0 komentar
Posting Komentar