Skip to content

Instantly share code, notes, and snippets.

@Holek

Holek/dabblet.css

Created February 5, 2013 13:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Holek/4714482 to your computer and use it in GitHub Desktop.
Save Holek/4714482 to your computer and use it in GitHub Desktop.
Download ZIP
mainNav
Raw
dabblet.css
/**
* mainNav
*/
* {
border: 0;
border-collapse: collapse;
empty-cells: show;
margin: 0;
padding: 0; }
body {
font-size: 62.5%;
font-family: Arial, Helvetica, sans-serif; }
:link, :visited, :hover, :active, :focus {
text-decoration: none; }
/* ...Topnav */
/* Main-Navigation... */
#mainNav {
margin: 65px 0 0;
position: absolute;
z-index: 1000; }
/* * html #mainNav { left: 0; } */
*:first-child + html #mainNav {
left: 0; }
#mainNav li {
border-left: 1px solid #333333;
float: left;
line-height: 24px;
list-style: none;
position: relative; }
#mainNav li:hover ul {
left: 0; }
#mainNav li:first-child {
border: 0; }
#mainNav li a, #mainNav li a:link, #mainNav li a:visited {
background-color: #D4D4D4;
background-image: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#D4D4D4)); /* Chrome, Safari 4+ */
background-image: -webkit-linear-gradient(top, #FAFAFA, #D4D4D4); /* Chrome 10+, iOS 5+, Safari 5.1+ */
background-image: -moz-linear-gradient(top, #FAFAFA, #D4D4D4); /* Firefox 3.6-15 */
background-image: -o-linear-gradient(top, #FAFAFA, #D4D4D4); /* Opera 11.10-12.00 */
background-image: linear-gradient(to bottom, #FAFAFA, #D4D4D4); /* Firefox 16+, IE 10+, Opera 12.50+ */
color: #990000;
display: block;
font-size: 12px;
font-weight: bold;
line-height: 24px;
padding: 0 12px; }
#mainNav li a:hover, #mainNav li a:active, #mainNav li a:focus {
background-color: #575757;
background-image: -webkit-gradient(linear, left top, left bottom, from(#6B6B6B), to(#575757)); /* Chrome, Safari 4+ */
background-image: -webkit-linear-gradient(top, #6B6B6B, #575757); /* Chrome 10+, iOS 5+, Safari 5.1+ */
background-image: -moz-linear-gradient(top, #6B6B6B, #575757); /* Firefox 3.6-15 */
background-image: -o-linear-gradient(top, #6B6B6B, #575757); /* Opera 11.10-12.00 */
background-image: linear-gradient(to bottom, #6B6B6B, #575757); /* Firefox 16+, IE 10+, Opera 12.50+ */
color: white;
text-decoration: none; }
#mainNav li a:link.link-disabled, #mainNav li a:visited.link-disabled {
background-color: whiteSmoke;
background-image: url(img/icn.png);
background-image: url(img/icn.png), -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#D4D4D4)); /* Chrome, Safari 4+ */
background-image: url(img/icn.png), -webkit-linear-gradient(top, #FAFAFA, #D4D4D4); /* Chrome 10+, iOS 5+, Safari 5.1+ */
background-image: url(img/icn.png), -moz-linear-gradient(top, #FAFAFA, #D4D4D4); /* Firefox 3.6-15 */
background-image: url(img/icn.png), -o-linear-gradient(top, #FAFAFA, #D4D4D4); /* Opera 11.10-12.00 */
background-image: url(img/icn.png), linear-gradient(to bottom, #FAFAFA, #D4D4D4); /* Firefox 16+, IE 10+, Opera 12.50+ */
background-position: 95% -310px, 0 0;
background-repeat: no-repeat, repeat-x;
padding-right: 18px; }
#mainNav li a:hover.link-disabled, #mainNav li a:active.link-disabled, #mainNav li a:focus.link-disabled {
background-color: #575757;
background-image: url(img/icn.png), -webkit-gradient(linear, left top, left bottom, from(#6B6B6B), to(#575757)); /* Chrome, Safari 4+ */
background-image: url(img/icn.png), -webkit-linear-gradient(top, #6B6B6B, #575757); /* Chrome 10+, iOS 5+, Safari 5.1+ */
background-image: url(img/icn.png), -moz-linear-gradient(top, #6B6B6B, #575757); /* Firefox 3.6-15 */
background-image: url(img/icn.png), -o-linear-gradient(top, #6B6B6B, #575757); /* Opera 11.10-12.00 */
background-image: url(img/icn.png), linear-gradient(to bottom, #6B6B6B, #575757); /* Firefox 16+, IE 10+, Opera 12.50+ */}
#mainNav li ul {
margin: 0 -1px;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
border-bottom: 1px solid #999999;
left: -9999px;
overflow: hidden;
position: absolute;
top: 24px;
width: 200px; }
#mainNav li ul li {
float: none;
border-left: 0;
display: block; }
#mainNav li ul li a {
color: #333333;
font-weight: normal;
font-size: 11px;
height: 24px; }
#mainNav li ul li a:link, #mainNav li ul li a:visited {
color: #333333;
font-weight: normal;
font-size: 11px;
height: 24px; }
#mainNav li ul li a:hover, #mainNav li ul li a:active, #mainNav li ul li a:focus {
color: white; }
#mainNav > li.active > a {
background: #575757 url(img/bg-sk1.png) 0 -734px;
color: white;
text-decoration: none; }
Raw
dabblet.html
<ul id="mainNav">
<li>
<a href="/dashboard" class="" title="">Dashboard</a>
</li>
<li>
<a href="/invoices" class="" title="">Dokumente</a>
<ul>
<li><a href="/invoices" class="" title="">Rechnungen</a></li>
<li><a href="/estimates" class="" title="">Angebote</a></li>
<li><a href="/payment_reminders" class="" title="">Mahnungen</a></li>
<li><a href="/credit_notes" class="" title="">Gutschriften</a></li>
<li><a href="/orders" class="" title="">Aufträge</a></li>
<li><a href="/recurrings" class="" title="">Wiederkehrende Rechnungen</a></li>
</ul>
</li>
<li>
<a href="/contacts?filter[type]=client" class="" title="">Kontakte</a>
<ul>
<li><a href="/contacts?filter[type]=client" class="" title="">Kunden</a></li>
<li><a href="/contacts?filter[type]=lead" class="" title="">Interessenten</a></li>
<li><a href="/contacts?filter[type]=supplier" class="" title="">Lieferanten</a></li>
</ul>
</li>
<li>
<a href="/products" class="link-disabled" title="">Produkte</a>
</li>
<li>
<a href="/income_accounts" class="" title="">Konten</a>
<ul>
<li><a href="/income_accounts" class="" title="">Einnahmen und Forderungen</a></li>
<li><a href="/expense_accounts" class="" title="">Ausgaben und Verbindlichkeiten</a></li>
<li><a href="/usage_accounts" class="" title="">Verbrauchskonten</a></li>
</ul>
</li>
<li>
<a href="/histories" class="" title="">Logs</a>
<ul>
<li><a href="/histories" class="" title="">Historien</a></li>
<li><a href="/comments" class="" title="">Kommentare</a></li>
<li><a href="/emails" class="" title="">E-Mails</a></li>
<li><a href="/letters" class="" title="">Briefe</a></li>
<li><a href="/payments" class="" title="">Zahlungen</a></li>
<li><a href="/exports" class="" title="">Exporte</a></li>
<li><a href="/attachments" class="" title="">Dateien</a></li>
<li><a href="/tags" class="" title="">Tags</a></li>
</ul>
</li>
<li>
<a href="/email_templates" class="" title="">Vorlagen</a>
<ul>
<li><a href="/email_templates" class="" title="">E-Mail Vorlage</a></li>
<li><a href="/pdf_templates" class="" title="">PDF Vorlagen</a></li>
<li><a href="/text_templates" class="" title="">Text Bausteine</a></li>
<li><a href="/feed_templates" class="" title="">Feed Vorlagen</a></li>
<li><a href="/export_templates" class="" title="">Export Vorlagen</a></li>
</ul>
</li>
<li>
<a href="/apps" class="" title="">Apps</a>
</li>
<li>
<a href="#" class="" title="">+</a>
<ul>
<li><a href="/contacts/new?contact[type]=Client" class="" title="">Kontakt</a></li>
<li><a href="/products/new" class="" title="">Produkt</a></li>
<li><a href="/invoices/new" class="" title="">Rechnung</a></li>
<li><a href="/estimates/new" class="" title="">Angebot</a></li>
<li><a href="/credit_notes/new" class="" title="">Gutschrift</a></li>
<li><a href="/orders/new" class="link-disabled" title="">Auftrag</a></li>
<li><a href="/recurrings/new" class="" title="">Wiederkehrende Rechnung</a></li>
</ul>
</li>
</ul>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment