Sidebar Menu Hover Show/Hide with just CSS
Created
April 23, 2018 07:46
-
-
Save CodeMyUI/9ea12138a9344a6a17bb0bcbeaa90171 to your computer and use it in GitHub Desktop.
Sidebar Menu Hover Show/Hide CSS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| </head> | |
| <body><div class="area"></div><nav class="main-menu"> | |
| <ul> | |
| <li> | |
| <a href="http://justinfarrow.com"> | |
| <i class="fa fa-home fa-2x"></i> | |
| <span class="nav-text"> | |
| Dashboard | |
| </span> | |
| </a> | |
| </li> | |
| <li class="has-subnav"> | |
| <a href="#"> | |
| <i class="fa fa-laptop fa-2x"></i> | |
| <span class="nav-text"> | |
| UI Components | |
| </span> | |
| </a> | |
| </li> | |
| <li class="has-subnav"> | |
| <a href="#"> | |
| <i class="fa fa-list fa-2x"></i> | |
| <span class="nav-text"> | |
| Forms | |
| </span> | |
| </a> | |
| </li> | |
| <li class="has-subnav"> | |
| <a href="#"> | |
| <i class="fa fa-folder-open fa-2x"></i> | |
| <span class="nav-text"> | |
| Pages | |
| </span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#"> | |
| <i class="fa fa-bar-chart-o fa-2x"></i> | |
| <span class="nav-text"> | |
| Graphs and Statistics | |
| </span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#"> | |
| <i class="fa fa-font fa-2x"></i> | |
| <span class="nav-text"> | |
| Typography and Icons | |
| </span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#"> | |
| <i class="fa fa-table fa-2x"></i> | |
| <span class="nav-text"> | |
| Tables | |
| </span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#"> | |
| <i class="fa fa-map-marker fa-2x"></i> | |
| <span class="nav-text"> | |
| Maps | |
| </span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#"> | |
| <i class="fa fa-info fa-2x"></i> | |
| <span class="nav-text"> | |
| Documentation | |
| </span> | |
| </a> | |
| </li> | |
| </ul> | |
| <ul class="logout"> | |
| <li> | |
| <a href="#"> | |
| <i class="fa fa-power-off fa-2x"></i> | |
| <span class="nav-text"> | |
| Logout | |
| </span> | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css); | |
| } | |
| @import url(https://fonts.googleapis.com/css?family=Titillium+Web:300); | |
| .fa-2x { | |
| font-size: 2em; | |
| } | |
| .fa { | |
| position: relative; | |
| display: table-cell; | |
| width: 60px; | |
| height: 36px; | |
| text-align: center; | |
| vertical-align: middle; | |
| font-size:20px; | |
| } | |
| .main-menu:hover,nav.main-menu.expanded { | |
| width:250px; | |
| overflow:visible; | |
| } | |
| .main-menu { | |
| background:#212121; | |
| border-right:1px solid #e5e5e5; | |
| position:absolute; | |
| top:0; | |
| bottom:0; | |
| height:100%; | |
| left:0; | |
| width:60px; | |
| overflow:hidden; | |
| -webkit-transition:width .05s linear; | |
| transition:width .05s linear; | |
| -webkit-transform:translateZ(0) scale(1,1); | |
| z-index:1000; | |
| } | |
| .main-menu>ul { | |
| margin:7px 0; | |
| } | |
| .main-menu li { | |
| position:relative; | |
| display:block; | |
| width:250px; | |
| } | |
| .main-menu li>a { | |
| position:relative; | |
| display:table; | |
| border-collapse:collapse; | |
| border-spacing:0; | |
| color:#999; | |
| font-family: arial; | |
| font-size: 14px; | |
| text-decoration:none; | |
| -webkit-transform:translateZ(0) scale(1,1); | |
| -webkit-transition:all .1s linear; | |
| transition:all .1s linear; | |
| } | |
| .main-menu .nav-icon { | |
| position:relative; | |
| display:table-cell; | |
| width:60px; | |
| height:36px; | |
| text-align:center; | |
| vertical-align:middle; | |
| font-size:18px; | |
| } | |
| .main-menu .nav-text { | |
| position:relative; | |
| display:table-cell; | |
| vertical-align:middle; | |
| width:190px; | |
| font-family: 'Titillium Web', sans-serif; | |
| } | |
| .main-menu>ul.logout { | |
| position:absolute; | |
| left:0; | |
| bottom:0; | |
| } | |
| .no-touch .scrollable.hover { | |
| overflow-y:hidden; | |
| } | |
| .no-touch .scrollable.hover:hover { | |
| overflow-y:auto; | |
| overflow:visible; | |
| } | |
| a:hover,a:focus { | |
| text-decoration:none; | |
| } | |
| 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; | |
| } | |
| .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:#5fa2db; | |
| } | |
| .area { | |
| float: left; | |
| background: #e2e2e2; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| @font-face { | |
| font-family: 'Titillium Web'; | |
| font-style: normal; | |
| font-weight: 300; | |
| src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff'); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment