Skip to content

Instantly share code, notes, and snippets.

@studentbow

studentbow/bar_test

Created October 1, 2018 05:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save studentbow/79867b7e9d5a1c2d41f4c154613f8b69 to your computer and use it in GitHub Desktop.
Save studentbow/79867b7e9d5a1c2d41f4c154613f8b69 to your computer and use it in GitHub Desktop.
Download ZIP
bar_test
Raw
bar_test
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文件</title>
<style type="text/css">
.main-nav {
background: #eee;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
@media (min-width: 768px) {
.main-nav {
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
}
}
.main-nav:after {
clear: both;
content: "\00a0";
display: block;
height: 0;
font: 0px/0 serif;
overflow: hidden;
}
.nav-brand {
float: left;
margin: 0;
}
.nav-brand a {
display: block;
padding: 12px 12px 12px 20px;
color: #555;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 22px;
font-weight: normal;
line-height: 17px;
text-decoration: none;
}
#main-menu {
clear: both;
}
@media (min-width: 768px) {
#main-menu {
float: right;
clear: none;
}
}
/* Mobile menu toggle button */
.main-menu-btn {
float: right;
margin: 6px 10px;
position: relative;
display: inline-block;
width: 29px;
height: 29px;
text-indent: 29px;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* hamburger icon */
.main-menu-btn-icon,
.main-menu-btn-icon:before,
.main-menu-btn-icon:after {
position: absolute;
top: 50%;
left: 2px;
height: 2px;
width: 24px;
background: #555;
-webkit-transition: all 0.25s;
transition: all 0.25s;
}
.main-menu-btn-icon:before {
content: '';
top: -7px;
left: 0;
}
.main-menu-btn-icon:after {
content: '';
top: 7px;
left: 0;
}
/* x icon */
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon {
height: 0;
background: transparent;
}
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:before {
top: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:after {
top: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
/* hide menu state checkbox (keep it visible to screen readers) */
#main-menu-state {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
/* hide the menu in mobile view */
#main-menu-state:not(:checked) ~ #main-menu {
display: none;
}
#main-menu-state:checked ~ #main-menu {
display: block;
}
@media (min-width: 768px) {
/* hide the button in desktop view */
.main-menu-btn {
position: absolute;
top: -99999px;
}
/* always show the menu in desktop view */
#main-menu-state:not(:checked) ~ #main-menu {
display: block;
}
}
/* IGNORE: Unrelated generic demo styles */
body {
margin: 8px;
background: #fff;
color: #aaa;
font: 16px/1.5em 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.demo-text {
margin: 3em 22px;
}
.demo-text p {
margin-bottom: 1em;
}
.demo-text a {
color: #999;
}
</style>
<script type="text/javascript">
// SmartMenus init
$(function() {
$('#main-menu').smartmenus({
mainMenuSubOffsetX: -1,
mainMenuSubOffsetY: 4,
subMenusSubOffsetX: 6,
subMenusSubOffsetY: -6
});
});
// SmartMenus mobile menu toggle button
$(function() {
var $mainMenuState = $('#main-menu-state');
if ($mainMenuState.length) {
// animate mobile menu
$mainMenuState.change(function(e) {
var $menu = $('#main-menu');
if (this.checked) {
$menu.hide().slideDown(250, function() { $menu.css('display', ''); });
} else {
$menu.show().slideUp(250, function() { $menu.css('display', ''); });
}
});
// hide mobile menu beforeunload
$(window).bind('beforeunload unload', function() {
if ($mainMenuState[0].checked) {
$mainMenuState[0].click();
}
});
}
});
</script>
</head>
<body>
<nav class="main-nav" role="navigation">
<!-- Mobile menu toggle button (hamburger/x icon) -->
<input id="main-menu-state" type="checkbox" />
<label class="main-menu-btn" for="main-menu-state">
<span class="main-menu-btn-icon"></span> Toggle main menu visibility
</label>
<h2 class="nav-brand"><a href="#">Brand</a></h2>
<!-- Sample menu definition -->
<ul id="main-menu" class="sm sm-clean">
<li><a href="http://www.smartmenus.org/">Home</a></li>
<li><a href="http://www.smartmenus.org/about/">About</a>
<ul>
<li><a href="http://www.smartmenus.org/about/introduction-to-smartmenus-jquery/">Introduction to SmartMenus jQuery</a></li>
<li><a href="http://www.smartmenus.org/about/themes/">Demos + themes</a></li>
<li><a href="http://vadikom.com/about/#vasil-dinkov">The author</a></li>
<li><a href="http://www.smartmenus.org/about/vadikom/">The company</a>
<ul>
<li><a href="http://vadikom.com/about/">About Vadikom</a></li>
<li><a href="http://vadikom.com/projects/">Projects</a></li>
<li><a href="http://vadikom.com/services/">Services</a></li>
<li><a href="http://www.smartmenus.org/about/vadikom/privacy-policy/">Privacy policy</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.smartmenus.org/download/">Download</a></li>
<li><a href="http://www.smartmenus.org/support/">Support</a>
<ul>
<li><a href="http://www.smartmenus.org/support/premium-support/">Premium support</a></li>
<li><a href="http://www.smartmenus.org/support/forums/">Forums</a></li>
</ul>
</li>
<li><a href="http://www.smartmenus.org/docs/">Docs</a></li>
<li><a href="#">Sub test</a>
<ul>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#" class="disabled">Disabled menu item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">more...</a>
<ul>
<li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">more...</a>
<ul>
<li><a href="#">Dummy item</a></li>
<li><a href="#" class="current">A 'current' class item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">more...</a>
<ul>
<li><a href="#">subMenusMinWidth</a></li>
<li><a href="#">10em</a></li>
<li><a href="#">forced.</a></li>
</ul>
</li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
</ul>
</li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.smartmenus.org/contact/">Contact</a></li>
</ul>
</nav>
<div class="demo-text">
<p>Demonstrates a complete navbar including a mobile view menu toggle button (<a href="http://www.smartmenus.org/docs/#menu-toggle-button">related docs</a>).</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment