Navigation Styles © by Juskteez

Cách sử dụng:

1 - Copy phần HTML bỏ vào bất kì trong overall_header hoặc thay {GENERATED_NAV_BAR} trong overrall_header
2 - Copy CSS của Style bạn chọn rồi gán vào QLTT -> Display -> Pictures and Colors -> Colors -> CSS Stylesheet. Xong!

HTML

<nav id="nav"><ul><li>{GENERATED_NAV_BAR}</li></ul></nav>

#Style 1

CSS

nav#nav {text-align:center;margin-bottom:1em;}
nav#nav ul {list-tyle:none;position:relative;margin:0;padding:0;}
nav#nav li {display:inline-block;}

nav#nav li a {
  color:#777 !important;display:inline-block;border-radius:3px;
  padding:3px 6px;border: 1px solid transparent;
  -moz-transition: all 0.2s ease;-webkit-transition: all 0.2s ease;
}
nav#nav li a:hover {
  border: 1px solid rgba(0,0,0,0.4);
  background:rgba(255,255,255,0.1);box-shadow: inset 0 0 1px rgba(255,255,255,1), 1px 1px 2px rgba(0,0,0,0.1);
}
nav#nav li a img {display:none;}

#Style 2

CSS

nav#nav li a {
  color:#fff !important;display:inline-block;vertical-align:middle;
  padding:10px 6px;background:#313131;box-shadow: inset 0 0 1px rgba(255,255,255,1), 1px 1px 2px rgba(0,0,0,0.1);
  -moz-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;
}
nav#nav li:nth-of-type(1) a:hover {background:#cf1f1f;}
nav#nav li:nth-of-type(2) a:hover {background:#f0912b;}
nav#nav li:nth-of-type(3) a:hover {background:#fcdb35;}
nav#nav li:nth-of-type(4) a:hover {background:#c7fc35;}
nav#nav li:nth-of-type(5) a:hover {background:#1dc222;}
nav#nav li:nth-of-type(6) a:hover {background:#2de09e;}
nav#nav li:nth-of-type(7) a:hover {background:#2dc3f0;}
nav#nav li:nth-of-type(8) a:hover {background:#3e6bc7;}
nav#nav li:nth-of-type(9) a:hover {background:#753ec7;}
nav#nav li a img {vertical-align:middle;}

#Style 3

CSS

nav#nav li {position:relative;-moz-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;}
nav#nav li a {position:relative;color:#313131;}
nav#nav li:hover a:before {content:"";position:absolute;width:100%;height:20px;margin-top:10px;}
nav#nav li:hover {-webkit-transform: translate(0,-10px);-moz-transform: translate(0,-10px);-o-transform: translate(0,-10px);-ms-transform: translate(0,-10px);}

#Style 4

CSS

nav#nav li a {color:#313131;}
nav#nav li {-moz-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;}
nav#nav li:hover {-webkit-transform: scale(2);-moz-transform: scale(2);-o-transform: scale(2);-ms-transform: scale(2);-moz-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;}

#Style 5

CSS

nav#nav li a {color:#313131;display:inline-block;-moz-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;}
nav#nav li:hover a{-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg);-ms-transform: rotateY(180deg);-o-transform: rotateY(180deg);-moz-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;}