Ajax Loader
×
HTML
<div class="navigation-container">
1
<div class="navigation-container">
2
  <ul id="product-navigation" class="navigation">
3
    <li id="navigation-title" class="root">
4
      <a href="#"><span>Products For Sale</span></a>
5
      <ul id="products-categories" class="categories">
6
        <li><a href="#"><span>Tickets</span></a>
7
          <ul id="tickets-categories" class="categories">
8
            <li><a href="#"><span>Music</span></a></li>
9
            <li><a href="#"><span>Sport</span></a></li>
10
            <li><a href="#"><span>Culture</span></a></li>
11
            <li><a href="#"><span>Travel</span></a></li>
12
            <li><a href="#"><span>Other</span></a></li>
13
          </ul>
14
        </li>
15
        <li><a href="#"><span>Electronics</span></a></li>
16
        <li><a href="#"><span>Home Appliances</span></a></li>
17
        <li><a href="#"><span>Other</span></a></li>
18
      </ul>
19
    </li>
20
  </ul>
21
</div>
 
CSS
// CSSDECK SPECIFIC
1
// CSSDECK SPECIFIC
2
body {
3
  padding: 30px;
4
}
5
// CSSDECK SPECIFIC
6
 
7
a {
8
  color: #fff;
9
}
10
 
11
$menu-root-background: linear-gradient(top left, #333, #0c0);
12
 
13
.navigation-container {
14
  background: #444;
15
  width: 320px;
16
  position: relative;
17
 
18
  // Main navigation list
19
  .navigation {
20
    &, ul {
21
      list-style: none;
22
      margin: 0;
23
      padding: 0;
24
    }
25
    
26
    // Main navigation element link
27
    // This is the one which opens the dropdown.
28
    .root {
29
      &, a {
30
        display: block;
31
        line-height: 38px;
32
      }
33
      & > a {
34
        @include background(linear-gradient(top left, #000, #0f0f0f));
35
        height: 38px;
36
        padding: 0 10px;
37
        text-decoration: none;
38
        text-transform: uppercase;
39
        font-size: .9em;
40
        font-weight: bold;
41
      }
42
    }
43
    
44
  }
45
  
46
}
 
JavaScript
var navigation = $('#product-navigation');
1
var navigation = $('#product-navigation');
2
 
3
 
 

Untitled

CSSDeck G+