Ausfahrbares Menü links |
| So sieht´s aus |
|
|
| Quellcode |
|
<html>
<head> <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <style type="text/css"> @import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css); .settings {height:73px; float:left; background-color:white; background-repeat:no-repeat; width:200px; height:0px;margin :0px;text-align: left; font-size:20px; font-family: 'Strait', sans-serif;} .scrollbar {height: auto; width: 100%; overflow-y: hidden; overflow-x: hidden;} .scrollbar:hover {height: 90%; width: 100%; overflow-y: scroll; overflow-x: hidden;} #style-1::-webkit-scrollbar-track {border-radius: 2px;} #style-1::-webkit-scrollbar {width: 5px; background-color: #F7F7F7;} #style-1::-webkit-scrollbar-thumb {border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #BFBFBF;} .fa-lg {font-size: 1em;} .fa {position: relative; display: table-cell; width: 55px; height: 36px; text-align: center; top:12px; font-size:20px;} .main-menu:hover, nav.main-menu.expanded {width:250px; overflow:hidden; opacity:1;} .main-menu {background:#F7F7F7; position:absolute; top:0; bottom:0; height:100%; left:0; width:55px; overflow:hidden; -webkit-transition:width .2s linear; transition:width .2s linear; -webkit-transform:translateZ(0) scale(1,1); box-shadow: 1px 0 15px rgba(0, 0, 0, 0.07); opacity:1;} .main-menu>ul {margin:7px 0;} .main-menu li {position:relative; display:block; width:250px;} .main-menu li>a {position:relative; width:255px; display:table; border-collapse:collapse; border-spacing:0; color:#8a8a8a; font-size: 13px; text-decoration:none; -webkit-transform:translateZ(0) scale(1,1); -webkit-transition:all .14s linear; transition:all .14s linear; font-family: 'Strait', sans-serif; border-top:1px solid #f2f2f2; text-shadow: 1px 1px 1px #fff;} .main-menu .nav-icon {position:relative; display:table-cell; width:55px; height:36px; text-align:center; vertical-align:middle; font-size:18px;} .main-menu .nav-text {position:relative; display:table-cell; text-align:left; vertical-align: middle; width:190px;} .no-touch .scrollable.hover {overflow-y:hidden;} .no-touch .scrollable.hover:hover {overflow-y:auto; overflow:visible;} /* Logo Hover Property */ .settings:hover, settings:focus {background-color:aqua; -webkit-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0; -moz-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0; -o-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0; transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;} .settings:active, settings:focus {background-color: blue); -webkit-transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0; -moz-transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0; -o-transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0; transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0;} a:hover,a:focus {text-decoration:none; border-left:0px solid #F7F7F7;} nav {-webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; -o-user-select:none; user-select:none;} nav ul,nav li {outline:0; margin:0; padding:0; text-transform: uppercase;} /* Darker element side menu Start*/ .darkerli {background-color:#ededed; text-transform:capitalize;} -moz-box-shadow: inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55); box-shadow: inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55);} .darkerlishadowdown {background-color:#ededed; text-transform:capitalize; -webkit-box-shadow: inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55); -moz-box-shadow: inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55); box-shadow: inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55);} /* Darker element side menu End*/ .main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a { color:#fff; background-color:#00bbbb; text-shadow: 0px 0px 0px;} </style> </head> <body> <nav class="main-menu"> <div><a class="logo" href="http://htmlknowhow.de"></a></div> <div class="settings"></div><div class="scrollbar" id="style-1"> <ul> <li><a href="../Index.php"><i class="fa fa-home fa-lg"></i><span class="nav-text">Home</span></a></li> <li><a href="http://htmlknowhow.de"><i class="fa fa-user fa-lg"></i><span class="nav-text">Login</span></a></li> <li><a href="../Kontakt.html"><i class="fa fa-envelope-o fa-lg"></i><span class="nav-text">Kontakt</span></a></li> <li class="darkerli"><a href="http://htmlknowhow.de"><i class="fa fa-clock-o fa-lg"></i><span class="nav-text">News</span></a></li> <li class="darkerli"><a href="http://htmlknowhow.de"><i class="fa fa-desktop fa-lg"></i><span class="nav-text">Technik</span></a></li> <li class="darkerli"><a href="http://htmlknowhow.de"><i class="fa fa-plane fa-lg"></i><span class="nav-text">Reisen</span></a></li> <li class="darkerli"><a href="http://htmlknowhow.de"><i class="fa fa-shopping-cart"></i><span class="nav-text">Shoppen</span></a></li> <li class="darkerli"><a href="http://htmlknowhow.de"><i class="fa fa-microphone fa-lg"></i><span class="nav-text">Film & Music</span></a></li> <li class="darkerli"><a href="http://htmlknowhow.de"><i class="fa fa-flask fa-lg"></i><span class="nav-text">Web Tools</span></a></li> <li class="darkerli"><a href="http://htmlknowhow.de"><i class="fa fa-picture-o fa-lg"></i><span class="nav-text">Art & Design</span></a></li> <li class="darkerli"><a href="http://htmlknowhow.de"><i class="fa fa-align-left fa-lg"></i><span class="nav-text">Magazine</span></a></li> <li class="darkerli"><a href="http://htmlknowhow.de"><i class="fa fa-gamepad fa-lg"></i><span class="nav-text">Spiele</span></a></li> <li class="darkerli"><a href="http://htmlknowhow.de"><i class="fa fa-glass fa-lg"></i><span class="nav-text">Life & Style</span></a></li> <li class="darkerli"><a href="http://htmlknowhow.de"><i class="fa fa-rocket fa-lg"></i><span class="nav-text">Spaß</span></a></li> </ul> </nav> </body> </html> |
Kontakt Datenschutz Impressum |