Deviant Menu

An easily customizable menu

created by sher.pl

Basic menu

HTML:

<div class="deviant" id="basic">
  <ul><li><a href="#mainmenu" class="title">Title</a><ul> 
    <li><a href="#new">New</a> 
      <ul> 
        <li><a href="#newcorporate">Corporate Use</a></li> 
        <li><a href="#newprivate">Private Use</a></li> 
      </ul> 
    </li> 
    <li><a href="#used">Used</a> 
      <ul> 
        <li><a href="#usedcorporate">Corporate Use</a></li> 
        <li><a href="#usedprivate">Private Use</a></li> 
      </ul> 
    </li> 
    <li><a href="#featured">Featured</a></li> 
    <li><a href="#toprated">Top Rated</a></li> 
    <li><a href="#prices">Prices</a></li> 
  </ul></li></ul> 
</div>

CSS:

NONE

JS:

window.addEvent("domready", function() {
  $('basic').DeviantMenu();
});

Effect:

Styled menu

HTML:

<div class="deviant" id="styled">
  <ul><li><a href="#mainmenu" class="title">Title</a><ul> 
    <li><a href="#new">New</a> 
      <ul> 
        <li><a href="#newcorporate">Corporate Use</a></li> 
        <li><a href="#newprivate">Private Use</a></li> 
      </ul> 
    </li> 
    <li><a href="#used">Used</a> 
      <ul> 
        <li><a href="#usedcorporate">Corporate Use</a></li> 
        <li><a href="#usedprivate">Private Use</a></li> 
      </ul> 
    </li> 
    <li><a href="#featured">Featured</a></li> 
    <li><a href="#toprated">Top Rated</a></li> 
    <li><a href="#prices">Prices</a></li> 
  </ul></li></ul> 
</div>

CSS:

#styled a {
  color: #fbaf32;
  text-decoration: none;
}

#styled a:hover {
  color: #f0e155;
}


#styled, #styled li, #styled ul {
  background-color: #333639;
}

#styled li a {
  list-style: none;
  border-bottom: 1px solid #44474b;
  padding: 4px 30px 4px 28px;
  margin: 0;
  cursor: pointer;
  height: 16px;
}

#styled .right {
  background: transparent url(right.gif) 95% center no-repeat;
}

#styled .left {
  background: #d1e751 url(left.gif) 5px center no-repeat;
  color: #222426;
  font-weight: bold;
}

#styled .left:hover {
  background-color: #d6e962;
}	

  #styled .left a {
    color: #222426;
  }

JS:

window.addEvent("domready", function() {
  $('styled').DeviantMenu({
    width: 200 // Set width to 200px
  });
});

Effect:

Styled stacked menu

HTML:

<div id="stacked">
  <div class="deviant">
    <ul><li><a href="#mainmenu">Title one</a><ul> 
      <li><a href="#new">New</a> 
        <ul> 
          <li><a href="#newcorporate">Corporate Use</a></li> 
          <li><a href="#newprivate">Private Use</a></li> 
        </ul> 
      </li> 
      <li><a href="#used">Used</a> 
        <ul> 
          <li><a href="#usedcorporate">Corporate Use</a></li> 
          <li><a href="#usedprivate">Private Use</a></li> 
        </ul> 
      </li> 
      <li><a href="#featured">Featured</a></li> 
      <li><a href="#toprated">Top Rated</a></li> 
      <li><a href="#prices">Prices</a></li> 
    </ul></li></ul> 
  </div>
  <div class="deviant">
    <ul><li><a href="#mainmenu">Title two</a><ul> 
      <li><a href="#new">New</a> 
        <ul> 
          <li><a href="#newcorporate">Corporate Use</a></li> 
          <li><a href="#newprivate">Private Use</a></li> 
        </ul> 
      </li> 
      <li><a href="#used">Used</a> 
        <ul> 
          <li><a href="#usedcorporate">Corporate Use</a></li> 
          <li><a href="#usedprivate">Private Use</a></li> 
        </ul> 
      </li> 
      <li><a href="#featured">Featured</a></li> 
      <li><a href="#toprated">Top Rated</a></li> 
      <li><a href="#prices">Prices</a></li> 
    </ul></li></ul> 
  </div>
  <div class="deviant">
    <ul><li><a href="#mainmenu">Title three</a><ul> 
      <li><a href="#new">New</a> 
        <ul> 
          <li><a href="#newcorporate">Corporate Use</a></li> 
          <li><a href="#newprivate">Private Use</a></li> 
        </ul> 
      </li> 
      <li><a href="#used">Used</a> 
        <ul> 
          <li><a href="#usedcorporate">Corporate Use</a></li> 
          <li><a href="#usedprivate">Private Use</a></li> 
        </ul> 
      </li> 
      <li><a href="#featured">Featured</a></li> 
      <li><a href="#toprated">Top Rated</a></li> 
      <li><a href="#prices">Prices</a></li> 
    </ul></li></ul> 
  </div>
</div>

CSS:

#stacked .deviant {
  clear: both; /* Optional */
}

#stacked .deviant a {
  color: #fbaf32;
  text-decoration: none;
}

#stacked .deviant a:hover {
  color: #f0e155;
}


#stacked .deviant, #stacked .deviant li, #stacked .deviant ul {
  background-color: #333639;
}

#stacked .deviant li a {
  list-style: none;
  border-bottom: 1px solid #44474b;
  padding: 4px 30px 4px 28px;
  margin: 0;
  cursor: pointer;
  height: 16px;
}

#stacked .deviant .right {
  background: transparent url(files/right.gif) 95% center no-repeat;
}

#stacked .deviant .left {
  background: #d1e751 url(files/left.gif) 5px center no-repeat;
  color: #222426;
  font-weight: bold;
}

#stacked .deviant .left:hover {
  background-color: #d6e962;
}	

  #stacked .deviant .left a {
    color: #222426;
  }

JS:

window.addEvent("domready", function() {
  $('stacked').DeviantMenu({
    width: 120,
    group: 'stacked', // Only one menu in group can be opened
  });
});

Effect:

Styled horizontal menu

HTML:

<div id="horizontal">
  <div class="deviant">
    <ul><li><a href="#mainmenu">Title one</a><ul> 
      <li><a href="#new">New</a> 
        <ul> 
          <li><a href="#newcorporate">Corporate Use</a></li> 
          <li><a href="#newprivate">Private Use</a></li> 
        </ul> 
      </li> 
      <li><a href="#used">Used</a> 
        <ul> 
          <li><a href="#usedcorporate">Corporate Use</a></li> 
          <li><a href="#usedprivate">Private Use</a></li> 
        </ul> 
      </li> 
      <li><a href="#featured">Featured</a></li> 
      <li><a href="#toprated">Top Rated</a></li> 
      <li><a href="#prices">Prices</a></li> 
    </ul></li></ul> 
  </div>
  <div class="deviant">
    <ul><li><a href="#mainmenu">Title two</a><ul> 
      <li><a href="#new">New</a> 
        <ul> 
          <li><a href="#newcorporate">Corporate Use</a></li> 
          <li><a href="#newprivate">Private Use</a></li> 
        </ul> 
      </li> 
      <li><a href="#used">Used</a> 
        <ul> 
          <li><a href="#usedcorporate">Corporate Use</a></li> 
          <li><a href="#usedprivate">Private Use</a></li> 
        </ul> 
      </li> 
      <li><a href="#featured">Featured</a></li> 
      <li><a href="#toprated">Top Rated</a></li> 
      <li><a href="#prices">Prices</a></li> 
    </ul></li></ul> 
  </div>
  <div class="deviant">
    <ul><li><a href="#mainmenu">Title three</a><ul> 
      <li><a href="#new">New</a> 
        <ul> 
          <li><a href="#newcorporate">Corporate Use</a></li> 
          <li><a href="#newprivate">Private Use</a></li> 
        </ul> 
      </li> 
      <li><a href="#used">Used</a> 
        <ul> 
          <li><a href="#usedcorporate">Corporate Use</a></li> 
          <li><a href="#usedprivate">Private Use</a></li> 
        </ul> 
      </li> 
      <li><a href="#featured">Featured</a></li> 
      <li><a href="#toprated">Top Rated</a></li> 
      <li><a href="#prices">Prices</a></li> 
    </ul></li></ul> 
  </div>
</div>

CSS:

#horizontal .deviant {
  float: left; /* !!! */
}

#horizontal .deviant a {
  color: #fbaf32;
  text-decoration: none;
}

#horizontal .deviant a:hover {
  color: #f0e155;
}


#horizontal .deviant, #horizontal .deviant li, #horizontal .deviant ul {
  background-color: #333639;
}

#horizontal .deviant li a {
  list-style: none;
  border-bottom: 1px solid #44474b;
  padding: 4px 30px 4px 28px;
  margin: 0;
  cursor: pointer;
  height: 16px;
}

#horizontal .deviant .right {
  background: transparent url(files/right.gif) 95% center no-repeat;
}

#horizontal .deviant .left {
  background: #d1e751 url(files/left.gif) 5px center no-repeat;
  color: #222426;
  font-weight: bold;
}

#horizontal .deviant .left:hover {
  background-color: #d6e962;
}	

  #horizontal .deviant .left a {
    color: #222426;
  }

JS:

window.addEvent("domready", function() {
  $('horizontal').DeviantMenu({
    width: 120,
    group: 'horizontal', // Only one menu in group can be opened
    duration: 1000, // Change duration of animation
    transition: 'bounce:out' // Change transition too
  });
});

Effect:

Another styled horizontal menu

HTML:

<div id="dropdown">
  <div class="link">
    <a href="#home">Home</a>
  </div>
  <div class="deviant">
    <ul><li><a href="#mainmenu" class="title">Title one</a><ul> 
      <li><a href="#new">New</a> 
        <ul> 
          <li><a href="#newcorporate">Corporate Use</a></li> 
          <li><a href="#newprivate">Private Use</a></li> 
        </ul> 
      </li> 
      <li><a href="#used">Used</a> 
        <ul> 
          <li><a href="#usedcorporate">Corporate Use</a></li> 
          <li><a href="#usedprivate">Private Use</a></li> 
        </ul> 
      </li> 
      <li><a href="#featured">Featured</a></li> 
      <li><a href="#toprated">Top Rated</a></li> 
      <li><a href="#prices">Prices</a></li> 
    </ul></li></ul> 
  </div>
  <div class="deviant">
    <ul><li><a href="#mainmenu" class="title">Title two</a><ul> 
      <li><a href="#new">New</a> 
        <ul> 
          <li><a href="#newcorporate">Corporate Use</a></li> 
          <li><a href="#newprivate">Private Use</a></li> 
        </ul> 
      </li> 
      <li><a href="#used">Used</a> 
        <ul> 
          <li><a href="#usedcorporate">Corporate Use</a></li> 
          <li><a href="#usedprivate">Private Use</a></li> 
        </ul> 
      </li> 
      <li><a href="#featured">Featured</a></li> 
      <li><a href="#toprated">Top Rated</a></li> 
      <li><a href="#prices">Prices</a></li> 
    </ul></li></ul> 
  </div>
</div>

CSS:

#dropdown div {
   float: left;
   padding: 0;
   background-color: #172322;
}

#dropdown div.link {		
  width: 50px;
  color: #fff;
  line-height: 25px;
  white-space: nowrap;
  height: 27px;
  text-align: center;
}

#dropdown a:link,
#dropdown a:visited { color: #fff; text-decoration: none; }
#dropdown a:hover { color: #b0d730; }
#dropdown a:active { color: #0395cc; }

#dropdown .deviant div {
  margin: 0 10px;
  overflow: hidden;
}

#dropdown .deviant ul {
  background-color: #172322;
  overflow: hidden;
  padding: 0px 0px;	
}

#dropdown .deviant li {
  background-color: #172322;
  height: 27px;
  line-height: 25px;	

}

#dropdown .right {
  background: #172322 url(files/arrow-right.png) 82px center no-repeat;
}

#dropdown .left {
  background: #172322 url(files/arrow-left.png) 82px center no-repeat;
}

#dropdown .title {
  background: #172322 url(files/arrow-down.png) 82px center no-repeat;
}

JS:

window.addEvent("domready", function() {
  $('dropdown').DeviantMenu({
    width: 120,
    autoclose: false,
    leftText: 'parent'
  });
});

Effect:

Fixed menu

HTML:

<div id="sticked">
  <div class="deviant one">
    <ul><li><a href="#mainmenu">Title one</a><ul> 
      <li><a href="#new">New</a> 
        <ul> 
          <li><a href="#newcorporate">Corporate Use</a></li> 
          <li><a href="#newprivate">Private Use</a></li> 
        </ul> 
      </li> 
      <li><a href="#used">Used</a> 
        <ul> 
          <li><a href="#usedcorporate">Corporate Use</a></li> 
          <li><a href="#usedprivate">Private Use</a></li> 
        </ul> 
      </li> 
      <li><a href="#featured">Featured</a></li> 
      <li><a href="#toprated">Top Rated</a></li> 
      <li><a href="#prices">Prices</a></li> 
    </ul></li></ul> 
  </div>
  <div class="deviant two">
    <ul><li><a href="#mainmenu">Title two</a><ul> 
      <li><a href="#new">New</a> 
        <ul> 
          <li><a href="#newcorporate">Corporate Use</a></li> 
          <li><a href="#newprivate">Private Use</a></li> 
        </ul> 
      </li> 
      <li><a href="#used">Used</a> 
        <ul> 
          <li><a href="#usedcorporate">Corporate Use</a></li> 
          <li><a href="#usedprivate">Private Use</a></li> 
        </ul> 
      </li> 
      <li><a href="#featured">Featured</a></li> 
      <li><a href="#toprated">Top Rated</a></li> 
      <li><a href="#prices">Prices</a></li> 
    </ul></li></ul> 
  </div>
</div>

CSS:


/* IMPORTANT PART */

#sticked {
  position: fixed;
  bottom: 0px;
  left: 10px
}

#sticked .one {
  position: absolute;
  bottom: 0;
  left: 0;
}

#sticked .two {
  position: absolute;
  bottom: 0;
  left: 130px; /* Width of menu */
}

/* END OF IMPORTANT PART */

#sticked a {
  color: #fbaf32;
  text-decoration: none;
}

#sticked a:hover {
  color: #f0e155;
}


#sticked li a {
  list-style: none;
  border-bottom: 1px solid #44474b;
  padding: 4px 30px 4px 28px;
  margin: 0;
  cursor: pointer;
  height: 16px;
}

#sticked .right {
  background: transparent url(files/right.gif) 95% center no-repeat;
}

#sticked .left {
  background: #d1e751 url(files/left.gif) 5px center no-repeat;
  color: #222426;
  font-weight: bold;
}

#sticked .left:hover {
  background-color: #d6e962;
}	

  #sticked .left a {
    color: #222426;
  }

JS:

window.addEvent("domready", function() {
  $('sticked').DeviantMenu({
    width: 130,
    leftPosition: 'bottom' // Position return button on bottom
  });
});

Effect:

At boottom-left of this page

Menu with icons and events

HTML:

<div class="deviant" id="example">
  <ul><li><a href="#mainmenu" class="title" style="background: url(files/user.png) 5px 50% no-repeat;">Main menu</a><ul> 
    <li><a style="background: url(files/add.png) 5px 50% no-repeat;" href="#new">New</a> 
      <ul> 
        <li><a href="#newcorporate">Corporate Use</a></li> 
        <li><a href="#newprivate">Private Use</a></li> 
      </ul> 
    </li> 
    <li><a href="#used" style="background: url(files/world.png) 5px 50% no-repeat;">Used</a> 
      <ul> 
        <li><a href="#usedcorporate">Corporate Use</a></li> 
        <li><a href="#usedprivate">Private Use</a></li> 
      </ul> 
    </li> 
    <li style="background: url(files/shield.png) 5px 50% no-repeat;"><a href="#featured">Featured</a></li> 
    <li><a href="#toprated">Top Rated</a></li> 
    <li><a href="#prices">Prices</a></li> 
  </ul></li></ul> 
</div>
<div id="status"></div>
<div id="status2"></div>

CSS:

#example a {
  color: #fbaf32;
  text-decoration: none;
}

#example a:hover {
  color: #f0e155;
}


#example, #example li, #example ul {
  background-color: #333639;
}

#example li a {
  list-style: none;
  border-bottom: 1px solid #44474b;
  padding: 4px 30px 4px 28px;
  margin: 0;
  cursor: pointer;
  height: 16px;
}

#example .right {
  background: transparent url(right.gif) 95% center no-repeat;
}

#example .left {
  background: #d1e751 url(left.gif) 5px center no-repeat;
  color: #222426;
  font-weight: bold;
}

#example .left:hover {
  background-color: #d6e962;
}	

  #example .left a {
    color: #222426;
  }

JS:

window.addEvent("domready", function() {
  $('example').DeviantMenu({
    width: 200,
    autoreset: false, // Additionaly disable autoreset
    onClick: function(item) {
      $('status2').set('html', 'Clicked ' + item.href);
    },
    onOpen: function(from, to) {
      $('status').set('html', 'Open 
From: ' + from.id + '
To: ' + to.id);
    },
    onClose: function(from, to) {
      $('status').set('html', 'Close 
From: ' + from.id + '
To: ' + to.id);
    },
    onOpened: function(from, to) {
      $('status').set('html', 'Opened 
From: ' + from.id + '
To: ' + to.id);
    },
    onClosed: function(from, to) {
      $('status').set('html', 'Closed 
From: ' + from.id + '
To: ' + to.id);
    }
  });
});

Effect:

Button menu

HTML:

<div class="deviant" id="button">
  <ul> 
    <li><a style="background: url(files/add.png) 5px 50% no-repeat;" href="#new">New</a> 
      <ul> 
        <li><a href="#newcorporate">Corporate Use</a></li> 
        <li><a href="#newprivate">Private Use</a></li> 
      </ul> 
    </li> 
    <li><a href="#used" style="background: url(files/world.png) 5px 50% no-repeat;">Used</a> 
      <ul> 
        <li><a href="#usedcorporate">Corporate Use</a></li> 
        <li><a href="#usedprivate">Private Use</a></li> 
      </ul> 
    </li> 
    <li style="background: url(files/shield.png) 5px 50% no-repeat;"><a href="#featured">Featured</a></li> 
    <li><a href="#toprated">Top Rated</a></li> 
    <li><a href="#prices">Prices</a></li> 
  </ul>
</div>

CSS:

#button_div {
  position: relative;
}

#button_deviant {
  position: absolute;
  top: 24px;
}

#button_deviant a {
  color: #fbaf32;
  text-decoration: none;
}

#button_deviant a:hover {
  color: #f0e155;
}


#button_deviant, #button_deviant li, #button_deviant ul {
  background-color: #333639;
}

#button_deviant li a {
  list-style: none;
  border-bottom: 1px solid #44474b;
  padding: 4px 30px 4px 28px;
  margin: 0;
  cursor: pointer;
  height: 16px;
}

#button_deviant .right {
  background: transparent url(files/right.gif) 95% center no-repeat;
}

#button_deviant .left {
  background: #d1e751 url(files/left.gif) 5px center no-repeat;
  color: #222426;
  font-weight: bold;
}

#button_deviant .left:hover {
  background-color: #d6e962;
}	

  #button_deviant .left a {
    color: #222426;
}

JS:

window.addEvent("domready", function() {
   $('button_deviant').DeviantMenu({
     button: 'button_show',
     reset: false // additionaly dont reset state
   });
});

Effect:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget ipsum libero, ac varius massa. Fusce et tellus et enim consectetur lobortis. Aliquam nec diam sed lorem mollis facilisis nec ut justo. Aliquam ut dui nibh. Sed sodales lacus vitae erat sollicitudin a vulputate elit accumsan. Integer elementum sagittis turpis quis fermentum. Mauris eu tortor nunc, sed tempor ante. Nunc risus nunc, fermentum ut pretium id, feugiat ac metus. Pellentesque feugiat auctor libero, at ullamcorper nibh vehicula nec. Nulla massa nisl, porttitor vel eleifend eu, viverra a elit. Morbi rhoncus nisi id metus vehicula iaculis. Donec enim eros, commodo ut dapibus et, condimentum ut lacus. Nullam porta porta dolor, id auctor lorem euismod eu.

JSON menu

HTML:

<div id="json"></div>

CSS:

#json a {
  color: #fbaf32;
  text-decoration: none;
}

#json a:hover {
  color: #f0e155;
}


#json, #json li, #json ul {
  background-color: #333639;
}

#json li a {
  list-style: none;
  border-bottom: 1px solid #44474b;
  padding: 4px 30px 4px 28px;
  margin: 0;
  cursor: pointer;
  height: 16px;
}

#json .right {
  background: transparent url(right.gif) 95% center no-repeat;
}

#json .left {
  background: #d1e751 url(left.gif) 5px center no-repeat;
  color: #222426;
  font-weight: bold;
}

#json .left:hover {
  background-color: #d6e962;
}	

  #json .left a {
    color: #222426;
  }

JS:

window.addEvent("domready", function() {
  $('json').JSONDeviantMenu({
    'JSON Menu': {
      'First': '#first',
      'Second': {
        'Second First': '#sf',
        'Second Second': '#ss',
        'Second Third': '#st',
        'Second Fourth': '#sfo'
      }
    }
  }, {
    width: 200
  });
});

Effect: