Sidebar Menu Hover Show/Hide with just CSS
Created
May 12, 2025 19:36
-
-
Save knightad10/1e94c1e66bf5b3699349b40e418446ae 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="https://jbfarrow.com"> | |
| <i class="fa fa-home fa-2x"></i> | |
| <span class="nav-text"> | |
| Community Dashboard | |
| </span> | |
| </a> | |
| </li> | |
| <li class="has-subnav"> | |
| <a href="#"> | |
| <i class="fa fa-globe fa-2x"></i> | |
| <span class="nav-text"> | |
| Global Surveyors | |
| </span> | |
| </a> | |
| </li> | |
| <li class="has-subnav"> | |
| <a href="#"> | |
| <i class="fa fa-comments fa-2x"></i> | |
| <span class="nav-text"> | |
| Group Hub Forums | |
| </span> | |
| </a> | |
| </li> | |
| <li class="has-subnav"> | |
| <a href="#"> | |
| <i class="fa fa-camera-retro fa-2x"></i> | |
| <span class="nav-text"> | |
| Survey Photos | |
| </span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#"> | |
| <i class="fa fa-film fa-2x"></i> | |
| <span class="nav-text"> | |
| Surveying Tutorials | |
| </span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#"> | |
| <i class="fa fa-book fa-2x"></i> | |
| <span class="nav-text"> | |
| Surveying Jobs | |
| </span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#"> | |
| <i class="fa fa-cogs fa-2x"></i> | |
| <span class="nav-text"> | |
| Tools & Resources | |
| </span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#"> | |
| <i class="fa fa-map-marker fa-2x"></i> | |
| <span class="nav-text"> | |
| Member Map | |
| </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:#000000; | |
| } | |
| .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