Documentations: Youplay HTML

Top Navbar

Top navbar have bootstrap navbar structure with some modifications (submenus):

<!-- Navbar -->
<nav class="navbar-youplay navbar navbar-default navbar-fixed-top ">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="off-canvas" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="index.html">
        <img src="assets/images/logo.png" alt="">
      </a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="dropdown dropdown-hover ">
          <a href="#!" class="dropdown-toggle" role="button" aria-expanded="false">
                    Store <span class="caret"></span> <span class="label">games</span>
                  </a>
          <div class="dropdown-menu" style="width: 320px;">
            <ul role="menu">
              <li><a href="store-1.html">Store Style 1</a>
              </li>
              <li><a href="store-2.html">Store Style 2</a>
              </li>
              <li><a href="cart.html">Cart</a>
              </li>
            </ul>
            <!--
                      -->
            <ul role="menu">
              <li><a href="store-product-1.html">Product Style 1</a>
              </li>
              <li><a href="store-product-2.html">Product Style 2</a>
              </li>
              <li><a href="checkout.html">Checkout</a>
              </li>
            </ul>
          </div>
        </li>
        <li class="dropdown dropdown-hover ">
          <a href="#!" class="dropdown-toggle" role="button" aria-expanded="false">
                    Blog <span class="caret"></span> <span class="label">news</span>
                  </a>
          <div class="dropdown-menu" style="width: 320px;">
            <ul role="menu">
              <li><a href="blog-1.html">Blog Style 1</a>
              </li>
              <li><a href="blog-2.html">Blog Style 2</a>
              </li>
              <li><a href="blog-3.html">Blog Style 3</a>
              </li>
            </ul>
            <!--
                      -->
            <ul role="menu">
              <li><a href="blog-post-1.html">Blog Post 1</a>
              </li>
              <li><a href="blog-post-2.html">Blog Post 2</a>
              </li>
              <li><a href="blog-post-3.html">Blog Post 3</a>
              </li>
            </ul>
          </div>
        </li>
        <li class="dropdown dropdown-hover active">
          <a href="#!" class="dropdown-toggle" role="button" aria-expanded="false">
                    Features <span class="caret"></span> <span class="label">full list</span>
                  </a>
          <div class="dropdown-menu" style="width: 320px;">
            <ul role="menu">
              <li><a href="components.html">Components</a>
              </li>
              <li><a href="user-profile.html">User Profile</a>
              </li>
              <li><a href="forums.html">Forums</a>
              </li>
              <li><a href="forums-topics.html">Forums Topics</a>
              </li>
              <li><a href="forums-single-topic.html">Single Topic</a>
              </li>
            </ul>
            <!--
                      -->
            <ul role="menu">
              <li><a href="coming-soon.html">Coming Soon</a>
              </li>
              <li class="active"><a href="contact.html">Contact Us</a>
              </li>
              <li><a href="search.html">Search</a>
              </li>
              <li><a href="login.html">Login</a>
              </li>
              <li><a href="404.html">404</a>
              </li>
              <li><a href="blank.html">Blank</a>
              </li>
            </ul>
          </div>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown dropdown-hover ">
          <a href="#!" class="dropdown-toggle" role="button" aria-expanded="false">
                    John Doe <span class="badge bg-default">2</span> <span class="caret"></span> <span class="label">it is you</span>
                  </a>
          <div class="dropdown-menu">
            <ul role="menu">
              <li><a href="../documentation">Documentation</a>
              </li>
              <li><a href="http://themeforest.net/item/youplay-game-template-based-on-bootstrap/11306207?ref=_nK">Purchase</a>
              </li>
              <li class="divider"></li>
 
              <li><a href="user-profile.html">Profile <span class="badge pull-right bg-warning">13</span></a>
              </li>
              <li><a href="cart.html">My Cart <span class="badge pull-right bg-default">3</span></a>
              </li>
              <li class="divider"></li>
 
              <li><a href="login.html">Log Out</a>
              </li>
              <li class="dropdown-submenu pull-left">
                <a href="#!">More..</a>
                <div class="dropdown-menu">
                  <ul role="menu">
                    <li><a href="#!">3rd level</a>
                    </li>
                    <li><a href="#!">3rd level</a>
                    </li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
        </li>
        <li>
          <a class="search-toggle" href="search.html">
            <i class="fa fa-search"></i>
          </a>
        </li>
        <li class="dropdown dropdown-hover dropdown-cart">
          <a href="#!" class="dropdown-toggle" role="button" aria-expanded="false">
            <i class="fa fa-shopping-cart"></i>
          </a>
          <div class="dropdown-menu" style="width: 300px;">
            <div class="row youplay-side-news">
              <div class="col-xs-3 col-md-4">
                <a href="#" class="angled-img">
                  <div class="img">
 
                    <img src="assets/images/game-bloodborne-500x375.jpg" alt="">
                  </div>
                </a>
              </div>
              <div class="col-xs-9 col-md-8">
                <a href="#" style="text-decoration: none;" class="pull-right mr-10"><i class="fa fa-times"></i></a>
 
                <h4 class="ellipsis"><a href="#">Bloodborne</a></h4>
                <span class="quantity">1 × <span class="amount">$50.00</span></span>
              </div>
            </div>
 
            <div class="row youplay-side-news">
              <div class="col-xs-3 col-md-4">
                <a href="#" class="angled-img">
                  <div class="img">
 
                    <img src="assets/images/game-kingdoms-of-amalur-reckoning-500x375.jpg" alt="">
                  </div>
                </a>
              </div>
              <div class="col-xs-9 col-md-8">
                <a href="#" style="text-decoration: none;" class="pull-right mr-10"><i class="fa fa-times"></i></a>
 
                <h4 class="ellipsis"><a href="#">Kingdoms of Amalur</a></h4>
                <span class="quantity">1 × <span class="amount">$20.00</span></span>
              </div>
            </div>
 
            <div class="ml-20 mr-20 pull-right"><strong>Subtotal:</strong>  <span class="amount">$70.00</span>
            </div>
 
            <div class="btn-group pull-right m-15">
              <a href="#" class="btn btn-default btn-sm">View Cart</a>
              <a href="#" class="btn btn-default btn-sm">Checkout</a>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>
<!-- /Navbar -->

 

Was this page helpful?