Skip to content

Instantly share code, notes, and snippets.

@naresh-io

naresh-io/dabblet.css

Last active July 9, 2016 14:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save naresh-io/c2aa769f6e793c43ff2fde122d5d939b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save naresh-io/c2aa769f6e793c43ff2fde122d5d939b to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
* {
margin: 0;
padding: 0;
}
.header {
width: 100%;
height: 50px;
background-color: #0066cc;
}
.sitename {
font-size: 25px;
line-height: 50px;
margin: 0px 50px;
display: inline-block;
color: white;
font-family: Helvetica, sans-serif;
float: left;
}
.sitename a {
text-decoration: none;
color: white;
}
#menu ul {
list-style: none;
font-size: 15px;
font-family: helvetica;
}
#menu ul li {
float: left;
position: relative;
width: 150px;
height: 50px;
line-height: 50px;
text-align: center;
}
#menu ul li a {
text-decoration: none;
color: white;
display: block;
}
#menu ul li ul a {
color: black;;
}
#menu ul li a:hover {
background-color: #4CAF50;
color: white;
}
#menu ul ul {
position: absolute;
display: none;
background: rgba(255,255,255,.5);
}
#menu ul li:hover > ul {
display: block;
}
#menu ul ul ul {
margin-left: 150px;
margin-top: -50px;
background: rgba(255,255,255,.5);
}
.slider img {
width: 100%;
}
/*.arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
}*/
Raw
dabblet.html
<div class="header">
<div class="sitename">Website Name</div>
<div id="menu">
<ul>
<li><a href="#">Tab 1</a>
<ul>
<li><a href="#">Sub Tab 1</a></li>
<li><a href="#">Sub Tab 2</a></li>
<li><a href="#">Sub Tab 3</a>
<ul>
<li><a href="#">Sub Sub Tab 1</a></li>
<li><a href="#">Sub Sub Tab 2</a></li>
<li><a href="#">Sub Sub Tab 3</a></li>
<li><a href="#">Sub Sub Tab 4</a></li>
<li><a href="#">Sub Sub Tab 5</a></li>
</ul> </li>
<li><a href="#">Sub Tab 4</a></li>
<li><a href="#">Sub Tab 5</a></li>
</ul>
</li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
<li><a href="#">Tab 4</a></li>
<li><a href="#">Tab 5</a></li>
</ul>
</div>
</div>
<div class="slider">
<img src = "http://www.sgbrandreach.com/wp-content/themes/food/img/cms_website_slider_img.png" />
</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment