Skip to content

Instantly share code, notes, and snippets.

@ghorvat

ghorvat/Navigation

Created December 16, 2016 15:53
Show Gist options
  • Save ghorvat/f57892351588a71baea350df7054cf17 to your computer and use it in GitHub Desktop.
Save ghorvat/f57892351588a71baea350df7054cf17 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Navigation
<div class="navbar navbar-default karndean-main-trigger hidden-xs">
<button type="button" class="navbar-toggle toggle-panel panel-one">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<i style="display: none"></i>
<p class="remove-when-open">Menu</p>
<p class="hidden show-when-open">Hide</p>
</button>
<button type="button" class="karndean-main-trigger_button navbar-toggle panel-two">
<i class="style-finder"></i>
<p class="remove-when-open">Style Finder</p>
<p class="hidden show-when-open">Hide</p>
</button>
<button type="button" class="karndean-main-trigger_button navbar-toggle panel-three">
<i class="mood-board"></i>
<p class="remove-when-open">Mood Board</p>
<p class="hidden show-when-open">Hide</p>
</button>
</div>
<nav id="nav-one" class="scotch-panel">
<div class="navbar navbar-default karndean-main-trigger hidden-sm hidden-md hidden-lg">
<button type="button" class="navbar-toggle toggle-panel panel-one">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<i style="display: none"></i>
<p class="remove-when-open">Menu</p>
<p class="hidden show-when-open">Hide</p>
</button>
<button type="button" class="karndean-main-trigger_button navbar-toggle panel-two">
<i class="style-finder"></i>
<p class="remove-when-open">Style Finder</p>
<p class="hidden show-when-open">Hide</p>
</button>
<button type="button" class="karndean-main-trigger_button navbar-toggle panel-three">
<i class="mood-board"></i>
<p class="remove-when-open">Mood Board</p>
<p class="hidden show-when-open">Hide</p>
</button>
</div>
<div class="scotch-panel_close hidden-sm hidden-md hidden-lg"><button class="closeAll" href=""><i class="leftArrow"></i>
<span>Hide</span>
</button>
</div>
<ul class="list-unstyled main-menu">
<li><a href="">Login</a></li>
<li>
<div class="panel-group menu-expanding" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="" role="tab" id="headingOne">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Browse all floors
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<ul class="list-unstyled">
<li><a href="">Lorem ipsum 1</a></li>
<li><a href="">Lorem ipsum 2</a></li>
<li><a href="">Lorem ipsum 3</a></li>
<li><a href="">Lorem ipsum 4</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="panel-group menu-expanding" id="accordion2" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="" role="tab" id="headingOne2">
<a role="button" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne2" aria-expanded="true" aria-controls="collapseOne2">
Browse all floors
</a>
</div>
<div id="collapseOne2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<ul class="list-unstyled">
<li><a href="">Lorem ipsum 1</a></li>
<li><a href="">Lorem ipsum 2</a></li>
<li><a href="">Lorem ipsum 3</a></li>
<li><a href="">Lorem ipsum 4</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li><a href="">Our Designflooring Ranges</a></li>
<li><a href="">LooseLay & Palio Clic</a></li>
<li><a href="">Order Cleaning Products</a></li>
<li><a href="">Explore by Room</a></li>
<li><a href="">Get Inspired</a></li>
<li><a href="">Guides & Resources</a></li>
<li><a href="">Explore by Room</a></li>
<li><a href="">Get Inspired</a></li>
<li><a href="">Guides & Resources</a></li>
<div class="local-retailer">
<p class="local-retailer_find">Find your local retailer</p>
<div class="cs local-retailer_search">
<section style="width: 100%; display: table;">
<div class="searchInputHeader" style="display: table-cell; width: 100%;">
<input style="width: 100%; padding: .5em 1em;" id="postcodeTextSide" type="text" placeholder="Enter town, city or zip code" autocomplete="off">
</div>
<div class="buttonInputHeader">
<button style="color: black; padding: 0.6em 1.6em; white-space: nowrap;" class="btn btn-default" type="submit" onclick="FindRetailer('postcodeTextSide');">Find</button>
</div>
</section>
</div>
</div>
</ul>
</nav>
<nav id="panel-2" class="scotch-panel">
<div class="navbar navbar-default karndean-main-trigger hidden-sm hidden-md hidden-lg">
<button type="button" class="navbar-toggle toggle-panel panel-one">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<i style="display: none"></i>
<p class="remove-when-open">Menu</p>
<p class="hidden show-when-open">Hide</p>
</button>
<button type="button" class="karndean-main-trigger_button navbar-toggle panel-two">
<i class="style-finder"></i>
<p class="remove-when-open">Style Finder</p>
<p class="hidden show-when-open">Hide</p>
</button>
<button type="button" class="karndean-main-trigger_button navbar-toggle panel-three">
<i class="mood-board"></i>
<p class="remove-when-open">Mood Board</p>
<p class="hidden show-when-open">Hide</p>
</button>
</div>
<div class="scotch-panel_icon"><i class="style-finder"></i></div>
<div class="scotch-panel_close hidden-sm hidden-md hidden-lg"><button class="closeAll" href=""><i class="leftArrow"></i>
<span>Hide</span>
</button>
</div>
<ul class="list-unstyled main-menu">
<li><a href="">View All <span class="bolded">Style Finder Projects</span></a></li>
<li><a href="">Bathroom</a></li>
<li><a href="">Kitchen</a></li>
<li><a href="">Living room 3</a></li>
<li><a href="">Start a new project</a></li>
</ul>
</nav>
<nav id="panel-3" class="scotch-panel">
<div class="navbar navbar-default karndean-main-trigger hidden-sm hidden-md hidden-lg">
<button type="button" class="navbar-toggle toggle-panel panel-one">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<i style="display: none"></i>
<p class="remove-when-open">Menu</p>
<p class="hidden show-when-open">Hide</p>
</button>
<button type="button" class="karndean-main-trigger_button navbar-toggle panel-two">
<i class="style-finder"></i>
<p class="remove-when-open">Style Finder</p>
<p class="hidden show-when-open">Hide</p>
</button>
<button type="button" class="karndean-main-trigger_button navbar-toggle panel-three">
<i class="mood-board"></i>
<p class="remove-when-open">Mood Board</p>
<p class="hidden show-when-open">Hide</p>
</button>
</div>
<div class="scotch-panel_icon"> <i class="mood-board"></i></div>
<div class="scotch-panel_close hidden-sm hidden-md hidden-lg"><button class="closeAll" href=""><i class="leftArrow"></i>
<span>Hide</span>
</button>
</div>
<ul class="list-unstyled main-menu">
<li><a href="">View All <span class="bolded">Moodboards</span></a></li>
<li><a href="">Bedroom Inspiration</a></li>
<li><a href="">Kitchen ideas</a></li>
<li><a href="">Wood floors</a></li>
<li><a href="">Stone favourites</a></li>
<li><a href="">Wood favourites</a></li>
</ul>
</nav>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment