I want to create a menu bar similar to the one found on . I am unsure of how they achieved this effect, but it seems to involve a scroll-over action. However, when I attempt to replicate it, the words still appear even when the menu bar is collapsed.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<!-- SlideBars Meta-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- END SlideBars Meta-->
<!-- This is the SlideBar CSS link-->
<link rel="stylesheet" href="CSS/slidebars.min.css">
<link href="CSS/Main.css" rel="stylesheet" type="text/css">
<!-- END SlideBar CSS link-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top sb-slide" role="navigation" style="webkit-transform: translate(381px);">
<a class="hidden-phone"><!-- Main navigation menu bar appears when desktop version is available-->
<div class="main-nav">
<div class="navicon-line-padding">
<div class="navicon-line"></div>
<div class="navicon-line"></div>
<div class="navicon-line"></div>
</div><!-- END navicon-line-padding-->
<ul class="main-nav-li">
<li>Home</li>
</ul><!-- End Main-nav-li-->
</div><!--End Main-nav-->
</a><!-- End hidden-phone-->
<a id="nav-open-btn" class="visible-phone" rel="track-event" data-ga-action="Mobile Menu" href="#">
<div class="sb-toggle-left navbar-left">
<div class="navicon-line"></div>
<div class="navicon-line"></div>
<div class="navicon-line"></div>
</div>
</a><!--END nav-open-btn-->
<!-- This Div is in place to make the MenuBar Work properly do not move-->
<div id="sb-site">
<p>
</p>
</div>
</nav>
<!-- END Sb-site Div-->
<!-- This is the SB-SlideBar Left Div-->
<div class="sb-slidebar sb-left sb-style-push sb-toggle-left">
<nav>
<ul class="sb-menu">
<li class="SquirrelIcon">
<a href="#"><img src="imgs/FurrySquirrelLogo2.png" width="300" height="174" alt="Furry Squirrel Productions"></a>
</li>
<li>
<a href="#" class="LinkItemMenu">Home</a>
</li>
</ul>
</nav>
</div><!-- END sb-slidebar sb-left div-->
<!-- Start SlideBar JQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<!-- END SlideBar Jquery-->
<!-- Start SlideBar JS-->
<script src="JS/slidebars.min.js">
</script>
<script>
(function($) {
$(document).ready(function() {
$.slidebars();
});
}) (jQuery);
</script>
<!-- END SlideBar JS-->
</body>
</html>
Here is my CSS code:
@charset "utf-8";
/* CSS Document */
.navicon-line {
background-color: #000;
height: 4px;
width: 24px;
margin-bottom: 3px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
}
.sb-toggle-left.navbar-left {
padding: 14px;
z-index: 1030;
top:
;
width: auto;
position: fixed;
}
.navbar.navbar-default.navbar-fixed-top.sb-slide {
position: fixed;
z-index: 1303;
left: 0px;
top: 0px;
height: auto;
width: 100%;
}
.SquirrelIcon {
margin-top: 20%;
margin-bottom: 20px;
margin-left: 5%;
margin-right: 5%;
}
.sb-menu .SquirrelIcon a img {
height: auto;
max-width: 100%;
}
#sb-site p {
width: 300px;
}
@media screen and (max-width: 43.125em) {
.visible-phone {
display: inherit !important;
}
.hidden-phone {
display: none !important;
}
}
.main-nav-li {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.5em;
color: #000;
text-decoration: none;
list-style-type: none;
}
.main-nav:hover {
height: auto;
width: 100%;
background-color: #0C0;
position: fixed;
left: 0px;
top: 0px;
}
.hidden-phone {
height: auto;
width: 100%;
}
.navicon-line-padding {
padding: 14px;
}
I am trying to ensure all items are invisible unless the user scrolls over the icon, at which point they should become visible.