mirror of https://github.com/lukechilds/docs.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
581 lines
44 KiB
581 lines
44 KiB
<!DOCTYPE html>
|
|
<html lang="en-gb" dir="ltr">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Sticky Navbar - UIkit tests</title>
|
|
<script src="js/test.js"></script>
|
|
</head>
|
|
|
|
<body style="padding-bottom: 1100px;">
|
|
|
|
<div class="uk-container uk-margin-bottom">
|
|
|
|
<h1>Sticky Navbar</h1>
|
|
|
|
</div>
|
|
|
|
<div class="tm-header">
|
|
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; bottom: #sticky-dropdown">
|
|
<nav class="uk-navbar-container">
|
|
<div class="uk-container">
|
|
<div uk-navbar>
|
|
<div class="uk-navbar-left">
|
|
|
|
<a class="uk-navbar-item uk-logo" href="#">Sticky + Dropdown</a>
|
|
|
|
<ul class="uk-navbar-nav">
|
|
<li class="uk-active"><a href="">Active</a></li>
|
|
<li>
|
|
<a href="">Parent</a>
|
|
<div class="uk-navbar-dropdown">
|
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
<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>
|
|
</li>
|
|
<li>
|
|
<a href="">Parent</a>
|
|
<div class="uk-navbar-dropdown">
|
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
<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>
|
|
</li>
|
|
<li><a href="">Item</a></li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="uk-section uk-section-default">
|
|
<div id="sticky-dropdown" class="uk-container">
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
|
|
|
|
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
|
|
|
|
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
|
|
|
|
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tm-header">
|
|
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; bottom: #sticky-dropbar">
|
|
<nav class="uk-navbar-container">
|
|
<div class="uk-container">
|
|
<div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container">
|
|
<div class="uk-navbar-left">
|
|
|
|
<a class="uk-navbar-item uk-logo" href="#">Sticky + Dropbar</a>
|
|
|
|
<ul class="uk-navbar-nav">
|
|
<li class="uk-active"><a href="">Active</a></li>
|
|
<li>
|
|
<a href="">Parent</a>
|
|
<div class="uk-navbar-dropdown">
|
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
<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>
|
|
</li>
|
|
<li>
|
|
<a href="">Parent</a>
|
|
<div class="uk-navbar-dropdown">
|
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
<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>
|
|
</li>
|
|
<li><a href="">Item</a></li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="uk-section uk-section-default">
|
|
<div id="sticky-dropbar" class="uk-container">
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
|
|
|
|
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
|
|
|
|
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
|
|
|
|
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tm-header">
|
|
<div uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; bottom: #sticky-dropbar-push">
|
|
<nav class="uk-navbar-container">
|
|
<div class="uk-container">
|
|
<div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container; dropbar-mode: push">
|
|
<div class="uk-navbar-left">
|
|
|
|
<a class="uk-navbar-item uk-logo" href="#">Sticky + Dropbar Push</a>
|
|
|
|
<ul class="uk-navbar-nav">
|
|
<li class="uk-active"><a href="">Active</a></li>
|
|
<li>
|
|
<a href="">Parent</a>
|
|
<div class="uk-navbar-dropdown">
|
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
<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>
|
|
</li>
|
|
<li>
|
|
<a href="">Parent</a>
|
|
<div class="uk-navbar-dropdown">
|
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
<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>
|
|
</li>
|
|
<li><a href="">Item</a></li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="uk-section uk-section-default">
|
|
<div id="sticky-dropbar-push" class="uk-container">
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
|
|
|
|
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
|
|
|
|
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
|
|
|
|
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tm-header">
|
|
<div uk-sticky="show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; bottom: #scrollup-dropdown">
|
|
<nav class="uk-navbar-container">
|
|
<div class="uk-container uk-container-expand">
|
|
<div uk-navbar>
|
|
<div class="uk-navbar-left">
|
|
|
|
<a class="uk-navbar-item uk-logo" href="#">Scroll Up + Dropdown</a>
|
|
|
|
<ul class="uk-navbar-nav">
|
|
<li class="uk-active"><a href="">Active</a></li>
|
|
<li>
|
|
<a href="">Parent</a>
|
|
<div class="uk-navbar-dropdown">
|
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
<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>
|
|
</li>
|
|
<li>
|
|
<a href="">Parent</a>
|
|
<div class="uk-navbar-dropdown">
|
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
<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>
|
|
</li>
|
|
<li><a href="">Item</a></li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="uk-section uk-section-default">
|
|
<div id="scrollup-dropdown" class="uk-container">
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
|
|
|
|
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
|
|
|
|
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
|
|
|
|
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tm-header">
|
|
<div uk-sticky="show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; bottom: #scrollup-dropbar">
|
|
<nav class="uk-navbar-container">
|
|
<div class="uk-container uk-container-expand">
|
|
<div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container">
|
|
<div class="uk-navbar-left">
|
|
|
|
<a class="uk-navbar-item uk-logo" href="#">Scroll Up + Dropbar</a>
|
|
|
|
<ul class="uk-navbar-nav">
|
|
<li class="uk-active"><a href="">Active</a></li>
|
|
<li>
|
|
<a href="">Parent</a>
|
|
<div class="uk-navbar-dropdown">
|
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
<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>
|
|
</li>
|
|
<li>
|
|
<a href="">Parent</a>
|
|
<div class="uk-navbar-dropdown">
|
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
<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>
|
|
</li>
|
|
<li><a href="">Item</a></li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="uk-section uk-section-default">
|
|
<div id="scrollup-dropbar" class="uk-container">
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
|
|
|
|
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
|
|
|
|
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
|
|
|
|
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div id="transparent-dropdown" class="uk-section-primary uk-preserve-color">
|
|
|
|
<div class="tm-header">
|
|
<div uk-sticky="show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent uk-light; top: 200; bottom: #transparent-dropdown;">
|
|
<nav class="uk-navbar-container">
|
|
<div class="uk-container uk-container-expand">
|
|
<div uk-navbar>
|
|
<div class="uk-navbar-left">
|
|
|
|
<a class="uk-navbar-item uk-logo" href="#">Transparent + Dropdown</a>
|
|
|
|
<ul class="uk-navbar-nav">
|
|
<li class="uk-active"><a href="">Active</a></li>
|
|
<li>
|
|
<a href="">Parent</a>
|
|
<div class="uk-navbar-dropdown">
|
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
<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>
|
|
</li>
|
|
<li>
|
|
<a href="">Parent</a>
|
|
<div class="uk-navbar-dropdown">
|
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
<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>
|
|
</li>
|
|
<li><a href="">Item</a></li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="uk-section uk-light">
|
|
<div class="uk-container">
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
|
|
|
|
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
|
|
|
|
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
|
|
|
|
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="transparent-dropbar" class="uk-section-secondary uk-preserve-color">
|
|
|
|
<div class="tm-header">
|
|
<div uk-sticky="show-on-up: true; animation: uk-animation-slide-top; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky; cls-inactive: uk-navbar-transparent uk-light; top: 200; bottom: #transparent-dropbar">
|
|
<nav class="uk-navbar-container">
|
|
<div class="uk-container uk-container-expand">
|
|
<div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container">
|
|
<div class="uk-navbar-left">
|
|
|
|
<a class="uk-navbar-item uk-logo" href="#">Transparent + Dropbar</a>
|
|
|
|
<ul class="uk-navbar-nav">
|
|
<li class="uk-active"><a href="">Active</a></li>
|
|
<li>
|
|
<a href="">Parent</a>
|
|
<div class="uk-navbar-dropdown">
|
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
<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>
|
|
</li>
|
|
<li>
|
|
<a href="">Parent</a>
|
|
<div class="uk-navbar-dropdown">
|
|
<ul class="uk-nav uk-navbar-dropdown-nav">
|
|
<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>
|
|
</li>
|
|
<li><a href="">Item</a></li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="uk-section uk-light">
|
|
<div class="uk-container">
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
|
|
|
|
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
|
|
|
|
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
|
|
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
|
|
|
|
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
|