Skip to content

Instantly share code, notes, and snippets.

@graffiti-withwind

graffiti-withwind/uikit-navbar-stickyfooter-offcanvas-layout.html

Last active July 26, 2017 11:33
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 graffiti-withwind/b978160cffe73fbce95fcbba2a8f3722 to your computer and use it in GitHub Desktop.
Save graffiti-withwind/b978160cffe73fbce95fcbba2a8f3722 to your computer and use it in GitHub Desktop.
Download ZIP
[UIKIT] Navbar-StickyFooter-Offcanvas Layout
Raw
uikit-navbar-stickyfooter-offcanvas-layout.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>UIKIT Navbar-StickyFooter-Offcanvas Layout</title>
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.27/css/uikit.min.css"/>
<!-- jQuery is required -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- UIkit JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.27/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.27/js/uikit-icons.min.js"></script>
<style>
/* Sticky footer styles
-------------------------------------------------- */
html, body {
height:100%;
}
#page-wrapper {
min-height: calc(100% - 20px);
margin-bottom: -60px;
}
#page-wrapper:after {
content: "";
display: block;
}
#page-footer, #page-wrapper:after {
height: 60px;
}
#page-footer {
/* Vertically center the text there */
background-color: #f5f5f5;
}
</style>
</head>
<body>
<div id="page-wrapper">
<div class="uk-navbar-container" uk-sticky>
<div class="uk-container uk-container-expand">
<div class="uk-navbar">
<div class="uk-navbar-left">
<div class="uk-navbar-item">
SITE TITLE
</div>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li class="uk-active"><a href="">MENU1</a></li>
<li class="uk-parent"><a href="">MENU2</a></li>
<li><a href="">MENU3</a></li>
</ul>
<a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#offcanvas" uk-toggle></a>
</div>
</div>
</div>
</div>
<div class="uk-container uk-container-expand uk-visible@m">
<ul class="uk-breadcrumb">
<li><a href="">Home</a></li>
<li><a href="">Menu1</a></li>
<li><a href="">Menu2</a></li>
<li><span href="">Contents</span></li>
</ul>
</div>
<!-- page contents -->
<div class="uk-section uk-section-small uk-section-default">
<div class="uk-container">
<h2>SECTION 1</h2>
<p>Section paragraph</p>
</div>
</div>
<!--/page contents -->
</div><!--/div#page-wrapper-->
<footer id="page-footer" class="uk-margin-top" uk-sticky>
<div class="uk-container uk-padding-small">
<p class="uk-text-small">copyright(c).</p>
</div>
</footer><!--/footer#page-footer-->
<div id="offcanvas" uk-offcanvas="flip: true; overlay: false; mode: slide;">
<div class="uk-offcanvas-bar">
<button class="uk-offcanvas-close" type="button" uk-close></button>
<ul class="uk-nav uk-nav-default">
<li class="uk-active"><a href="#">Active</a></li>
<li class="uk-parent">
<a href="#">Parent</a>
<ul class="uk-nav-sub">
<li><a href="#">Sub item</a></li>
<li><a href="#">Sub item</a></li>
</ul>
</li>
<li class="uk-nav-header">Header</li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
<li class="uk-nav-divider"></li>
<li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
</ul>
</div>
</div><!--/div#offcanvas-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment