85 lines
8.9 KiB
HTML
85 lines
8.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>Skeleton menu - demonstration page</title>
|
||
|
|
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="css/normalize.css">
|
||
|
|
<link rel="stylesheet" href="css/skeleton.css">
|
||
|
|
<link rel="stylesheet" href="css/menu.css">
|
||
|
|
|
||
|
|
<script src="js/menu.js"></script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<!-- The menu -->
|
||
|
|
<nav id="nav">
|
||
|
|
<!-- Optional logo -->
|
||
|
|
<div class="nav-logo"><img height=40px src="logo.png" />
|
||
|
|
</div>
|
||
|
|
<!-- The menu itself -->
|
||
|
|
<div>
|
||
|
|
<ul>
|
||
|
|
<li><a href="#home">Title home</a></li>
|
||
|
|
<li><a href="#menu1">Menu 1</a></li>
|
||
|
|
<li><a href="#menu2">Menu 2</a></li>
|
||
|
|
<li><a href="#menu3">Menu 3</a>
|
||
|
|
<ul>
|
||
|
|
<li><a href="#">Submenu 3.1</a></li>
|
||
|
|
<li><a href="#">Submenu 3.2</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li><a href="#menu4">Menu 4</a>
|
||
|
|
<ul>
|
||
|
|
<li><a href="#">Submenu 4.1</a></li>
|
||
|
|
<li><a href="#">Submenu 4.2</a></li>
|
||
|
|
<li><a href="#">Submenu 4.3</a></li>
|
||
|
|
<li><a href="#">Submenu 4.4</a></li>
|
||
|
|
<li><a href="#">Submenu 4.5</a></li>
|
||
|
|
<li><a href="#">Submenu 4.6</a></li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li class="u-pull-right"><a href="#login">Login</a></li>
|
||
|
|
<li class="right"><a href="#register">Register</a></li>
|
||
|
|
<li class="icon">
|
||
|
|
<a href="javascript:void(0);" onclick="toggleMobileNav();">☰</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<div class="row">
|
||
|
|
<div class="one-half column">
|
||
|
|
<h4>Example page</h4>
|
||
|
|
<p> Simple skeleton menu is a simple responsive menu which can be used with <a href="http://getskeleton.com">Skeleton</a> boilerplate. It is inspired by <a href="https://github.com/rotaercz/skeleton-with-nav-menu">rotaercz's menu</a>.</p>
|
||
|
|
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas laoreet magna eu quam auctor mollis. Vestibulum in volutpat metus. Maecenas congue consectetur rutrum. Fusce eget varius mauris. Nunc eu nisl dolor. Duis rhoncus, sapien sed efficitur vestibulum, justo arcu venenatis nisl, at eleifend mauris felis sit amet ligula. Ut dignissim aliquet porttitor. Mauris auctor nisl euismod ex efficitur consequat. Pellentesque dignissim laoreet dictum. Phasellus tincidunt tristique neque.</p>
|
||
|
|
|
||
|
|
<p>Nulla ut posuere metus. Pellentesque et nulla mollis, gravida risus sit amet, porta ipsum. Proin malesuada dui vitae libero rutrum, a imperdiet mauris suscipit. Nunc condimentum pharetra tortor ac porttitor. Nam at dui ut libero tristique finibus at in ipsum. Quisque varius elit non bibendum vehicula. Nam vulputate non enim ac volutpat.</p>
|
||
|
|
|
||
|
|
<p>Suspendisse quis massa ultrices, eleifend sem id, euismod diam. Morbi rhoncus, turpis ac fringilla ultricies, ex nulla iaculis orci, vitae blandit arcu tortor ac dui. In eros arcu, laoreet ac elit vitae, pellentesque lacinia elit. Nullam sollicitudin felis eros, non ullamcorper tellus tempus in. Etiam fermentum sodales volutpat. Aenean ac tempus diam. Nullam laoreet sodales nulla, ut aliquet dui placerat eget. Quisque felis odio, volutpat eu aliquam quis, vestibulum ac est. Nam sit amet diam posuere, tincidunt risus sed, varius orci. Integer porttitor scelerisque est. Aliquam in nunc vitae lorem hendrerit pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam dictum felis sed mattis luctus. Ut auctor ultricies mauris, ut efficitur metus vestibulum non. Morbi ornare varius mi, id tempor mi fermentum ut.</p>
|
||
|
|
|
||
|
|
<p>Donec lobortis sodales sapien sed hendrerit. Quisque fermentum suscipit fringilla. Maecenas efficitur, metus eget commodo pellentesque, enim urna suscipit nibh, ut interdum justo massa sed felis. Fusce justo eros, malesuada nec tortor at, feugiat placerat tellus. Fusce ac sapien sit amet velit ornare vulputate vitae non massa. Maecenas lacus quam, tempor eget nunc ut, venenatis tincidunt leo. In interdum scelerisque dolor, nec sagittis erat aliquet iaculis. Praesent aliquam turpis eget libero vehicula porta. Aliquam luctus massa neque, aliquet pharetra nisl rhoncus ut. Vivamus in convallis tellus. Pellentesque quis mauris aliquet, finibus orci a, laoreet magna. Sed nec nulla sodales, varius neque sed, sagittis dui. Aliquam tortor ex, sodales vitae suscipit eget, tincidunt at massa. Pellentesque turpis neque, fermentum in tempus ut, finibus vel diam. Nulla euismod, ligula vitae posuere volutpat, metus risus pellentesque erat, ac semper ex nisi vel nunc. Etiam scelerisque orci ac pulvinar rhoncus.</p>
|
||
|
|
|
||
|
|
<p>Fusce pretium vehicula tristique. Duis bibendum nibh id ligula porttitor pulvinar. Suspendisse pulvinar imperdiet ligula, ac tempor mauris. Maecenas a nunc fermentum velit fringilla malesuada sed sit amet lectus. Mauris justo nisi, auctor eu luctus non, hendrerit mollis neque. Nullam vel placerat tellus, vestibulum accumsan justo. Sed pretium augue et lectus fermentum tincidunt. Vestibulum vel lacus leo. Mauris in turpis vel felis molestie faucibus. Mauris ultricies justo at nibh pellentesque, id ultrices nisl mattis. Proin semper, arcu ut vulputate facilisis, turpis neque ullamcorper dui, vitae mollis tortor justo in leo. Sed lorem sapien, tincidunt non lacinia ut, posuere vitae eros. Ut vel justo et arcu lacinia consequat in quis arcu. Donec ex erat, accumsan vel elit eget, tincidunt vestibulum magna. Nam sodales felis ipsum, id pulvinar lacus cursus ut. Nam tristique, massa a accumsan blandit, velit felis congue ipsum, vitae bibendum nisl lorem vel quam.</p>
|
||
|
|
|
||
|
|
<p>Nullam vel ex vestibulum, ullamcorper elit ac, pellentesque felis. Aliquam ac eros lacus. Aenean ipsum mauris, congue at bibendum non, euismod ac lacus. Morbi at odio quis enim semper tincidunt non nec elit. Etiam non sagittis diam. Etiam sit amet nunc laoreet, sagittis velit in, venenatis nunc. Mauris vel elementum magna. Suspendisse faucibus orci ut bibendum accumsan. Praesent eget ligula diam. Vivamus a ex ut tortor ullamcorper eleifend vitae in orci. Suspendisse accumsan eu erat in eleifend.</p>
|
||
|
|
|
||
|
|
<p>Sed quis ultrices mi. Proin commodo sed nulla quis tincidunt. Mauris nec interdum dui, sed suscipit elit. Mauris nec egestas orci. Quisque id odio gravida, efficitur tortor nec, porttitor est. Quisque imperdiet vitae lorem et semper. Cras et iaculis est. Nullam lacinia varius consequat. In hac habitasse platea dictumst. Phasellus semper ultrices luctus. Quisque cursus euismod dui, vitae ornare odio maximus ac. Proin sollicitudin mi a felis gravida faucibus. Nam a hendrerit dui. Maecenas a ante nisl.</p>
|
||
|
|
<p>Phasellus lacinia erat id erat tempor, in tempus erat posuere. Maecenas in diam arcu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam vitae congue arcu. Nullam eleifend arcu odio, eu egestas odio accumsan at. Aliquam et viverra lacus, ut tincidunt tortor. Vivamus et enim at ipsum pretium suscipit a a elit. Phasellus sit amet nibh arcu.</p>
|
||
|
|
|
||
|
|
<p>Nunc sodales enim id eros convallis, malesuada ullamcorper velit tincidunt. Cras tellus tortor, bibendum venenatis ornare ac, sagittis ac ipsum. Vestibulum non hendrerit neque, non eleifend nisl. Nam vitae tincidunt augue, eget consectetur erat. Maecenas eget enim quis enim vulputate faucibus. Pellentesque enim urna, commodo nec nulla eget, suscipit condimentum dolor. In volutpat lacus et augue hendrerit, quis feugiat nisi sollicitudin. Morbi est nunc, hendrerit eu euismod nec, finibus ullamcorper quam. Praesent ut arcu sit amet arcu lacinia varius. Sed imperdiet orci in lacus volutpat sollicitudin. Nunc sollicitudin tincidunt tempor. Aenean vel tincidunt arcu, a varius lorem. Praesent tempor aliquam lorem, eget pellentesque arcu porttitor ultricies. Nullam nisl enim, vestibulum vitae sem ut, mollis viverra ante. Curabitur eros leo, malesuada at ullamcorper vel, gravida a velit.</p>
|
||
|
|
|
||
|
|
<p>Aliquam neque ante, sodales ut mi ac, tempus ultrices dui. In commodo justo eget nibh fringilla, ac posuere velit porttitor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam ac dolor pulvinar, bibendum purus vitae, eleifend eros. Sed nec fringilla lorem, non fringilla leo. Nam pellentesque maximus tortor et porta. Nam rhoncus ut risus vitae posuere. Vivamus varius tellus eu tempor sagittis. Vivamus elementum, libero porttitor feugiat tincidunt, dolor leo consectetur purus, nec feugiat ex orci eu nisi. Vivamus suscipit dolor sed quam aliquam, id tincidunt nulla suscipit. Nam a arcu ligula. Donec lacinia, arcu sit amet semper vehicula, ipsum lacus egestas leo, at dictum neque mauris vitae sapien. In porta nibh ac sem cursus, non tristique erat pretium.</p>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|