Skip to content

Instantly share code, notes, and snippets.

@arlenreyb

arlenreyb/dabblet.css

Created June 20, 2014 18:42
Show Gist options
  • Save arlenreyb/424f5f46e457d95185ce to your computer and use it in GitHub Desktop.
Save arlenreyb/424f5f46e457d95185ce to your computer and use it in GitHub Desktop.
Download ZIP
Navigation Bar
Raw
dabblet.css
/**Navigation Bar
* The first commented line is your dabblet’s title
*/
Raw
dabblet.html
<html>
<head>
<base target="_blank">
<style>
body {
border: 0;
margin: 0;
overflow: hidden;
font-family: "Helvetica neue",Helvetica,Arial,Sans-serif;
font-size: 13px;
}
a {
text-decoration:none;
font-weight: bold;
}
ul, li {
margin: 2 0;
padding: 2 0;
}
h4 {
margin: 2 0 0 0;
padding: 0;
}
#menutree li {
list-style: none;
}
li .menu_label + input[type=checkbox] {
opacity: 0;
}
li .menu_label {
cursor: pointer;
}
li .menu_label + input[type=checkbox] + ol > li {
display: none;
}
li .menu_label + input[type=checkbox]:checked + ol > li {
display: block;
}
ol {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
li {
margin: 3px 3px 3px 3px;
padding: 0px 0px 0px 0px;
}
.menu_label {
font-weight: bold;
}
</style>
</head>
<body>
<ol id="menutree">
<li class="page"><a href="#">Store Home</a></li>
<!--Essential Oils-->
<li>
<label class="menu_label" for="a1">Essential Oils</label>
<input type="checkbox" id="a1" /> <!-- input must follow label for safari -->
<ol>
<li class="page">- <a href="#">Buy 3 Get 1 Free!</a></li>
<li>
<label for="a2" class="menu_label">- Angelica Root</label>
<input type="checkbox" id="a2" />
<ol>
<li class="page"> - <a href="#">Free Shipping</a></li>
<li class="page"> - <a href="#">5 ml Glass Bottle w/ Euro Dropper</a></li>
<li class="page"> - <a href="#">10 ml Glass Bottle w/ Euro Dropper</a></li>
<li class="page"> - <a href="#">15 ml Glass Bottle w/ Euro Dropper</a></li>
<li class="page"> - <a href="#">30 ml Glass Bottle w/ Euro Dropper</a></li>
<li class="page"> - <a href="#">2 oz Glass Bottle w/ Cap</a></li>
<li class="page"> - <a href="#">4 oz Glass Bottle w/ Cap</a></li>
<li class="page"> - <a href="#">8 oz Glass Bottle w/ Cap</a></li>
<li class="page"> - <a href="#">16 oz Plastic Jug w/ Cap</a></li>
</ol>
</li>
<li>
<label for="a3" class="menu_label">- Anise Star</label>
<input type="checkbox" id="a3" />
<ol>
<li class="page"> - <a href="#">Free Shipping</a></li>
<li class="page"> - <a href="#">5 ml Glass Bottle w/ Euro Dropper</a></li>
<li class="page"> - <a href="#">10 ml Glass Bottle w/ Euro Dropper</a></li>
<li class="page"> - <a href="#">15 ml Glass Bottle w/ Euro Dropper</a></li>
<li class="page"> - <a href="#">30 ml Glass Bottle w/ Euro Dropper</a></li>
<li class="page"> - <a href="#">2 oz Glass Bottle w/ Cap</a></li>
<li class="page"> - <a href="#">4 oz Glass Bottle w/ Cap</a></li>
<li class="page"> - <a href="#">8 oz Glass Bottle w/ Cap</a></li>
<li class="page"> - <a href="#">16 oz Plastic Jug w/ Cap</a></li>
<li class="page"> - <a href="#">32 oz Plastic Jug w/ Cap</a></li>
<li class="page"> - <a href="#">1 Gallon Plastic Jug w/ Cap</a></li>
</ol>
</li>
</ol>
</li>
<!--Carrier Oils-->
<li>
<label class="menu_label" for="b1">Carrier Oils</label>
<input type="checkbox" id="b1" /> <!-- input must follow label for safari -->
<ol>
<li>
<label for="b2" class="menu_label">- Almond (Sweet)</label>
<input type="checkbox" id="b2" />
<ol>
<li class="page">- <a href="#">Free Shipping</a></li>
<li class="page">- <a href="#">1 oz Glass Bottle w/ Euro Dropper</a></li>
<li class="page">- <a href="#">2 oz Plastic Bottle w/ Cap</a></li>
<li class="page">- <a href="#">4 oz Plastic Bottle w/ Cap</a></li>
<li class="page">- <a href="#">8 oz Plastic Bottle w/ Cap</a></li>
<li class="page">- <a href="#">16 oz Plastic Jug w/ Cap</a></li>
<li class="page">- <a href="#">32 oz Plastic Jug w/ Cap</a></li>
<li class="page">- <a href="#">1 Gallon Plastic Jug w/ Cap</a></li>
</ol>
</li>
<li>
<label for="b3" class="menu_label">- Aloe Vera</label>
<input type="checkbox" id="b3" />
<ol>
<li class="page">- <a href="#">Free Shipping</a></li>
<li class="page">- <a href="#">1 oz Glass Bottle w/ Euro Dropper</a></li>
<li class="page">- <a href="#">2 oz Plastic Bottle w/ Cap</a></li>
<li class="page">- <a href="#">4 oz Plastic Bottle w/ Cap</a></li>
<li class="page">- <a href="#">8 oz Plastic Bottle w/ Cap</a></li>
<li class="page">- <a href="#">16 oz Plastic Jug w/ Cap</a></li>
<li class="page">- <a href="#">32 oz Plastic Jug w/ Cap</a></li>
<li class="page">- <a href="#">1 Gallon Plastic Jug w/ Cap</a></li>
</ol>
</li>
</ol>
</li>
<!--Hydrosols-->
<li>
<label class="menu_label" for="c1">Hydrosols</label>
<input type="checkbox" id="c1" /> <!-- input must follow label for safari -->
<ol>
<li>
<label for="c2" class="menu_label">Chamomile Hydrosol</label>
<input type="checkbox" id="c2" />
<ol>
<li class="page"><a href="#">Free Shipping Listing</a></li>
<li class="page"><a href="#">1 oz Glass Bottle w/ Euro Dropper</a></li>
<li class="page"><a href="#">2 oz Plastic Bottle w/ Cap</a></li>
<li class="page"><a href="#">2 oz Plastic Bottle w/ Spray Cap</a></li>
<li class="page"><a href="#">4 oz Plastic Bottle w/ Cap</a></li>
<li class="page"><a href="#">4 oz Plastic Bottle w/ Spray Cap</a></li>
<li class="page"><a href="#">8 oz Plastic Bottle w/ Cap</a></li>
<li class="page"><a href="#">8 oz Plastic Bottle w/ Spray Cap</a></li>
<li class="page"><a href="#">16 oz Plastic Jug w/ Cap</a></li>
<li class="page"><a href="#">32 oz Plastic Jug w/ Cap</a></li>
<li class="page"><a href="#">1 Gallon Plastic Jug w/ Cap</a></li>
</ol>
</li>
<li>
<label for="c3" class="menu_label">Lavender Hydrosol</label>
<input type="checkbox" id="c3" />
<ol>
<li class="page"><a href="#">Free Shipping Listing</a></li>
<li class="page"><a href="#">1 oz Glass Bottle w/ Euro Dropper</a></li>
<li class="page"><a href="#">2 oz Plastic Bottle w/ Cap</a></li>
<li class="page"><a href="#">2 oz Plastic Bottle w/ Spray Cap</a></li>
<li class="page"><a href="#">4 oz Plastic Bottle w/ Cap</a></li>
<li class="page"><a href="#">4 oz Plastic Bottle w/ Spray Cap</a></li>
<li class="page"><a href="#">8 oz Plastic Bottle w/ Cap</a></li>
<li class="page"><a href="#">8 oz Plastic Bottle w/ Spray Cap</a></li>
<li class="page"><a href="#">16 oz Plastic Jug w/ Cap</a></li>
<li class="page"><a href="#">32 oz Plastic Jug w/ Cap</a></li>
<li class="page"><a href="#">1 Gallon Plastic Jug w/ Cap</a></li>
</ol>
</li>
<li>
<label for="c4" class="menu_label">Rose Hydrosol</label>
<input type="checkbox" id="c4" />
<ol>
<li class="page"><a href="#">Free Shipping Listing</a></li>
<li class="page"><a href="#">1 oz Glass Bottle w/ Euro Dropper</a></li>
<li class="page"><a href="#">2 oz Plastic Bottle w/ Cap</a></li>
<li class="page"><a href="#">2 oz Plastic Bottle w/ Spray Cap</a></li>
<li class="page"><a href="#">4 oz Plastic Bottle w/ Cap</a></li>
<li class="page"><a href="#">4 oz Plastic Bottle w/ Spray Cap</a></li>
<li class="page"><a href="#">8 oz Plastic Bottle w/ Cap</a></li>
<li class="page"><a href="#">8 oz Plastic Bottle w/ Spray Cap</a></li>
<li class="page"><a href="#">16 oz Plastic Jug w/ Cap</a></li>
<li class="page"><a href="#">32 oz Plastic Jug w/ Cap</a></li>
<li class="page"><a href="#">1 Gallon Plastic Jug w/ Cap</a></li>
</ol>
</li>
<li>
<label for="c5" class="menu_label">Sandalwood Hydrosol</label>
<input type="checkbox" id="c5" />
<ol>
<li class="page"><a href="#">Free Shipping Listing</a></li>
<li class="page"><a href="#">1 oz Glass Bottle w/ Euro Dropper</a></li>
<li class="page"><a href="#">2 oz Plastic Bottle w/ Cap</a></li>
<li class="page"><a href="#">2 oz Plastic Bottle w/ Spray Cap</a></li>
<li class="page"><a href="#">4 oz Plastic Bottle w/ Cap</a></li>
<li class="page"><a href="#">4 oz Plastic Bottle w/ Spray Cap</a></li>
<li class="page"><a href="#">8 oz Plastic Bottle w/ Cap</a></li>
<li class="page"><a href="#">8 oz Plastic Bottle w/ Spray Cap</a></li>
<li class="page"><a href="#">16 oz Plastic Jug w/ Cap</a></li>
<li class="page"><a href="#">32 oz Plastic Jug w/ Cap</a></li>
<li class="page"><a href="#">1 Gallon Plastic Jug w/ Cap</a></li>
</ol>
</li>
</ol>
</li>
</ol>
</body>
</html>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment