[Code] Thanh Nav đơn giản

Diễn đàn Game Private
  • Forumotion
  • Code

      • [Code] Thanh Nav đơn giản

      • Post n°1

      Bài gửi  by Death Gun Thu Jul 31, 2014 9:49 am

      demo: [You must be registered and logged in to see this link.]
      Dùng CSS + HTML nên khá đơn giản  >:) 
      Bạn có thể chèn đâu tùy theo mình muốn Wink cười
      Muốn nó hiện ở đầu forum thì chèn sau 
      Code:
      <a id="top" name="top" accesskey="t"></a>
       (y) 
      Code:
      <ul id="nav">
                      <li><a href="#">Home</a></li>
                      <li><a href="#s1">Menu 1</a>
                          <span id="s1"></span>
                          <ul class="subs">
                              <li><a href="#">Header a</a>
                                  <ul>
                                      <li><a href="#">Submenu x</a></li>
                                      <li><a href="#">Submenu y</a></li>
                                      <li><a href="#">Submenu z</a></li>
                                  </ul>
                              </li>
                              <li><a href="#">Header b</a>
                                  <ul>
                                      <li><a href="#">Submenu x</a></li>
                                      <li><a href="#">Submenu y</a></li>
                                      <li><a href="#">Submenu z</a></li>
                                  </ul>
                              </li>
                          </ul>
                      </li>
                      <li class="active"><a href="#s2">Menu 2</a>
                          <span id="s2"></span>
                          <ul class="subs">
                              <li><a href="#">Header c</a>
                                  <ul>
                                      <li><a href="#">Submenu x</a></li>
                                      <li><a href="#">Submenu y</a></li>
                                      <li><a href="#">Submenu z</a></li>
                                  </ul>
                              </li>
                              <li><a href="#">Header d</a>
                                  <ul>
                                      <li><a href="#">Submenu x</a></li>
                                      <li><a href="#">Submenu y</a></li>
                                      <li><a href="#">Submenu z</a></li>
                                  </ul>
                              </li>
                          </ul>
                      </li>
                      <li><a href="#">Menu 3</a></li>
                      <li><a href="#">Menu 4</a></li>
                      <li><a href="#">Menu 5</a></li>
                      <li><a href="http://www.script-tutorials.com/css3-responsive-menu/">Back to Responsive menu tutorial</a></li>
                  </ul>
      Code:
      #nav li.active > a {
          background-color: #359BED;
          color: #FFFFFF;
      }
      /* submenu */
      #nav li:hover ul.subs {
          display: block;
      }
      #nav ul.subs > li {
          display: inline-block;
          float: none;
          padding: 10px 1%;
          vertical-align: top;
          width: 33%;
      }
      #nav ul.subs > li a {
          color: #777777;
          line-height: 20px;
      }
      #nav ul li a:hover {
          color: #F55856;
      }
      #nav ul.subs > li > a {
          font-size: 1.3em;
          margin-bottom: 10px;
          text-transform: uppercase;
      }
      #nav ul.subs > li li {
          float: none;
          padding-left: 8px;
          -moz-transition: padding 150ms ease-out 0s;
          -ms-transition: padding 150ms ease-out 0s;
          -o-transition: padding 150ms ease-out 0s;
          -webkit-transition: padding 150ms ease-out 0s;
          transition: padding 150ms ease-out 0s;
      }
      #nav ul.subs > li li:hover {
          padding-left: 15px;
      }
      /* common and top level styles */
      #nav span {
          display: none;
      }
      #nav, #nav ul {
          list-style: none outside none;
          margin: 0;
          padding: 0;
      }
      #nav {
          background-color: #F5F5F5;
          border-bottom: 5px solid #359BED;
          float: left;

          position: relative;
          width: 100%;
      }
      #nav ul.subs {
          background-color: #FFFFFF;
          box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
          color: #333333;
          display: none;
          left: 0;
          padding: 2%;
          position: absolute;
          top: 54px;
          width: 96%;
      }
      #nav > li {
          border-bottom: 5px solid transparent;
          float: left;
          margin-bottom: -5px;
          text-align: left;
          -moz-transition: all 300ms ease-in-out 0s;
          -ms-transition: all 300ms ease-in-out 0s;
          -o-transition: all 300ms ease-in-out 0s;
          -webkit-transition: all 300ms ease-in-out 0s;
          transition: all 300ms ease-in-out 0s;
      }
      #nav li a {
          display: block;
          text-decoration: none;
          -moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
          -ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
          -o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
          -webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
          transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
          white-space: normal;
      }
      #nav > li > a {
          color: #333333;
          display: block;
          font-size: 1.3em;
          line-height: 49px;
          padding: 0 15px;
          text-transform: uppercase;
      }
      #nav > li:hover > a, #nav > a:hover {
          background-color: #F55856;
          color: #FFFFFF;
      }
      Demo 2 : [You must be registered and logged in to see this link.]
      Code:
      /* CSS3 delays for transition effects */
      .menu li:hover .submenu li:nth-child(1) {
          -webkit-transition-delay: 0s;
          -moz-transition-delay: 0s;
          -ms-transition-delay: 0s;
          -o-transition-delay: 0s;
          transition-delay: 0s;
      }
      .menu li:hover .submenu li:nth-child(2) {
          -webkit-transition-delay: 50ms;
          -moz-transition-delay: 50ms;
          -ms-transition-delay: 50ms;
          -o-transition-delay: 50ms;
          transition-delay: 50ms;
      }
      .menu li:hover .submenu li:nth-child(3) {
          -webkit-transition-delay: 100ms;
          -moz-transition-delay: 100ms;
          -ms-transition-delay: 100ms;
          -o-transition-delay: 100ms;
          transition-delay: 100ms;
      }
      .menu li:hover .submenu li:nth-child(4) {
          -webkit-transition-delay: 150ms;
          -moz-transition-delay: 150ms;
          -ms-transition-delay: 150ms;
          -o-transition-delay: 150ms;
          transition-delay: 150ms;
      }
      .menu li:hover .submenu li:nth-child(5) {
          -webkit-transition-delay: 200ms;
          -moz-transition-delay: 200ms;
          -ms-transition-delay: 200ms;
          -o-transition-delay: 200ms;
          transition-delay: 200ms;
      }
      .menu li:hover .submenu li:nth-child(6) {
          -webkit-transition-delay: 250ms;
          -moz-transition-delay: 250ms;
          -ms-transition-delay: 250ms;
          -o-transition-delay: 250ms;
          transition-delay: 250ms;
      }
      .menu li:hover .submenu li:nth-child(7) {
          -webkit-transition-delay: 300ms;
          -moz-transition-delay: 300ms;
          -ms-transition-delay: 300ms;
          -o-transition-delay: 300ms;
          transition-delay: 300ms;
      }
      .menu li:hover .submenu li:nth-child(8) {
          -webkit-transition-delay: 350ms;
          -moz-transition-delay: 350ms;
          -ms-transition-delay: 350ms;
          -o-transition-delay: 350ms;
          transition-delay: 350ms;
      }

      .submenu li:nth-child(1) {
          -webkit-transition-delay: 350ms;
          -moz-transition-delay: 350ms;
          -ms-transition-delay: 350ms;
          -o-transition-delay: 350ms;
          transition-delay: 350ms;
      }
      .submenu li:nth-child(2) {
          -webkit-transition-delay: 300ms;
          -moz-transition-delay: 300ms;
          -ms-transition-delay: 300ms;
          -o-transition-delay: 300ms;
          transition-delay: 300ms;
      }
      .submenu li:nth-child(3) {
          -webkit-transition-delay: 250ms;
          -moz-transition-delay: 250ms;
          -ms-transition-delay: 250ms;
          -o-transition-delay: 250ms;
          transition-delay: 250ms;
      }
      .submenu li:nth-child(4) {
          -webkit-transition-delay: 200ms;
          -moz-transition-delay: 200ms;
          -ms-transition-delay: 200ms;
          -o-transition-delay: 200ms;
          transition-delay: 200ms;
      }
      .submenu li:nth-child(5) {
          -webkit-transition-delay: 150ms;
          -moz-transition-delay: 150ms;
          -ms-transition-delay: 150ms;
          -o-transition-delay: 150ms;
          transition-delay: 150ms;
      }
      .submenu li:nth-child(6) {
          -webkit-transition-delay: 100ms;
          -moz-transition-delay: 100ms;
          -ms-transition-delay: 100ms;
          -o-transition-delay: 100ms;
          transition-delay: 100ms;
      }
      .submenu li:nth-child(7) {
          -webkit-transition-delay: 50ms;
          -moz-transition-delay: 50ms;
          -ms-transition-delay: 50ms;
          -o-transition-delay: 50ms;
          transition-delay: 50ms;
      }
      .submenu li:nth-child(8) {
          -webkit-transition-delay: 0s;
          -moz-transition-delay: 0s;
          -ms-transition-delay: 0s;
          -o-transition-delay: 0s;
          transition-delay: 0s;
      }
        /* submenu styles */
      .submenu {
          left: 0;
          max-height: 0;
          position: absolute;
          top: 100%;
          z-index: 0;

          -webkit-perspective: 400px;
          -moz-perspective: 400px;
          -ms-perspective: 400px;
          -o-perspective: 400px;
          perspective: 400px;
      }
      .submenu li {
          opacity: 0;

          -webkit-transform: rotateY(90deg);
          -moz-transform: rotateY(90deg);
          -ms-transform: rotateY(90deg);
          -o-transform: rotateY(90deg);
          transform: rotateY(90deg);

          -webkit-transition: opacity .4s, -webkit-transform .5s;
          -moz-transition: opacity .4s, -moz-transform .5s;
          -ms-transition: opacity .4s, -ms-transform .5s;
          -o-transition: opacity .4s, -o-transform .5s;
          transition: opacity .4s, transform .5s;
      }
      .menu .submenu li:hover a {
          border-left: 3px solid #454545;
          border-radius: 0;
          color: #ffffff;
      }
      .menu > li:hover .submenu, .menu > li:focus .submenu {
          max-height: 2000px;
          z-index: 10;
      }
      .menu > li:hover .submenu li, .menu > li:focus .submenu li {
          opacity: 1;

          -webkit-transform: none;
          -moz-transform: none;
          -ms-transform: none;
          -o-transform: none;
          transform: none;
      }
        .menu li:hover {
          background-color: #1c1c1c;
          background: -moz-linear-gradient(#1c1c1c, #1b1b1b);
          background: -ms-linear-gradient(#1c1c1c, #1b1b1b);
          background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1c1c1c), color-stop(100%, #1b1b1b));
          background: -webkit-linear-gradient(#1c1c1c, #1b1b1b);
          background: -o-linear-gradient(#1c1c1c, #1b1b1b);
          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b');
          -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b')";
          background: linear-gradient(#1c1c1c, #1b1b1b);

          border-bottom: 2px solid #222222;
          border-top: 2px solid #1B1B1B;
      }
      .menu li:hover > a {
          border-radius: 5px 0 0 0;
          border-left: 3px solid #C4302B;
          color: #C4302B;
      }
        .menu, .menu ul {
          list-style: none;
          padding: 0;
          margin: 0;
      }
      .menu {
          height: 58px;
      }
      .menu li {
          background: -moz-linear-gradient(#292929, #252525);
          background: -ms-linear-gradient(#292929, #252525);
          background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #292929), color-stop(100%, #252525));
          background: -webkit-linear-gradient(#292929, #252525);
          background: -o-linear-gradient(#292929, #252525);
          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525');
          -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525')";
          background: linear-gradient(#292929, #252525);

          border-bottom: 2px solid #181818;
          border-top: 2px solid #303030;
          min-width: 160px;
      }
      .menu > li {
          display: block;
          float: left;
          position: relative;
      }
      .menu > li:first-child {
          border-radius: 5px 0 0;
      }
      .menu a {
          border-left: 3px solid rgba(0, 0, 0, 0);
          color: #808080;
          display: block;
          font-family: 'Lucida Console';
          font-size: 18px;
          line-height: 54px;
          padding: 0 25px;
          text-decoration: none;
          text-transform: uppercase;
        }
      Code:
      <ul class="menu">
          <li><a href="#">Home</a></li>
          <li><a href="#s1">Menu 1</a>
              <ul class="submenu">
                  <li><a href="#">Submenu a</a></li>
                  <li><a href="#">Submenu b</a></li>
                  <li><a href="#">Submenu c</a></li>
                  <li><a href="#">Submenu d</a></li>
                  <li><a href="#">Submenu e</a></li>
                  <li><a href="#">Submenu f</a></li>
                  <li><a href="#">Submenu g</a></li>
                  <li><a href="#">Submenu h</a></li>
              </ul>
          </li>
          <li class="active"><a href="#s2">Menu 2</a>
              <ul class="submenu">
                  <li><a href="#">Submenu a</a></li>
                  <li><a href="#">Submenu b</a></li>
                  <li><a href="#">Submenu c</a></li>
                  <li><a href="#">Submenu d</a></li>
                  <li><a href="#">Submenu e</a></li>
                  <li><a href="#">Submenu f</a></li>
                  <li><a href="#">Submenu g</a></li>
                  <li><a href="#">Submenu h</a></li>
              </ul>
          </li>
          <li><a href="#">Menu 3</a>
              <ul class="submenu">
                  <li><a href="#">Submenu a</a></li>
                  <li><a href="#">Submenu b</a></li>
                  <li><a href="#">Submenu c</a></li>
                  <li><a href="#">Submenu d</a></li>
                  <li><a href="#">Submenu e</a></li>
                  <li><a href="#">Submenu f</a></li>
                  <li><a href="#">Submenu g</a></li>
                  <li><a href="#">Submenu h</a></li>
              </ul>
          </li>
          <li><a href="#">Menu 4</a></li>
          <li><a href="http://www.script-tutorials.com/whirling-dropdown-menu/">Back to tutorial</a></li>
      </ul>


      ChinhPhuc
      • Về Đầu Trang
      Death Gun
      Death Gun
      « Xem chủ đề cũ hơn · Xem chủ đề mới hơn »