mirror of https://github.com/ColorlibHQ/AdminLTE
overhauled top-nav layout with a collapsable menu
REJack
parent
99e51bc31a
commit
c011e42b77
|
|
@ -63,6 +63,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
.navbar-no-expand {
|
||||
flex-direction: row;
|
||||
|
||||
.nav-link {
|
||||
padding-left: $navbar-nav-link-padding-x;
|
||||
padding-right: $navbar-nav-link-padding-x;
|
||||
}
|
||||
}
|
||||
|
||||
// Color variants
|
||||
@each $color, $value in $theme-colors {
|
||||
@if $color == dark or $color == light {
|
||||
|
|
|
|||
|
|
@ -22,73 +22,77 @@ scratch. This page gets rid of all links and provides the needed markup only.
|
|||
<div class="wrapper">
|
||||
|
||||
<!-- Navbar -->
|
||||
<nav class="main-header navbar navbar-expand navbar-light navbar-white">
|
||||
<nav class="main-header navbar navbar-expand-md navbar-light navbar-white">
|
||||
<div class="container">
|
||||
<a href="index3.html" class="navbar-brand">
|
||||
<img src="../../dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
|
||||
style="opacity: .8">
|
||||
<span class="brand-text font-weight-light">AdminLTE 3</span>
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler order-1" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<!-- Left navbar links -->
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
</li>
|
||||
<li class="nav-item d-none d-sm-inline-block">
|
||||
<a href="index3.html" class="nav-link">Home</a>
|
||||
</li>
|
||||
<li class="nav-item d-none d-sm-inline-block">
|
||||
<a href="#" class="nav-link">Contact</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a id="dropdownSubMenu1" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle">Dropdown</a>
|
||||
<ul aria-labelledby="dropdownSubMenu1" class="dropdown-menu border-0 shadow">
|
||||
<li><a href="#" class="dropdown-item">Some action </a></li>
|
||||
<li><a href="#" class="dropdown-item">Some other action</a></li>
|
||||
<div class="collapse navbar-collapse order-3" id="navbarCollapse">
|
||||
<!-- Left navbar links -->
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a href="index3.html" class="nav-link">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Contact</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a id="dropdownSubMenu1" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle">Dropdown</a>
|
||||
<ul aria-labelledby="dropdownSubMenu1" class="dropdown-menu border-0 shadow">
|
||||
<li><a href="#" class="dropdown-item">Some action </a></li>
|
||||
<li><a href="#" class="dropdown-item">Some other action</a></li>
|
||||
|
||||
<li class="dropdown-divider"></li>
|
||||
<li class="dropdown-divider"></li>
|
||||
|
||||
<!-- Level two dropdown-->
|
||||
<li class="dropdown-submenu dropdown-hover">
|
||||
<a id="dropdownSubMenu2" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-item dropdown-toggle">Hover for action</a>
|
||||
<ul aria-labelledby="dropdownSubMenu2" class="dropdown-menu border-0 shadow">
|
||||
<li>
|
||||
<a tabindex="-1" href="#" class="dropdown-item">level 2</a>
|
||||
</li>
|
||||
<!-- Level two dropdown-->
|
||||
<li class="dropdown-submenu dropdown-hover">
|
||||
<a id="dropdownSubMenu2" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-item dropdown-toggle">Hover for action</a>
|
||||
<ul aria-labelledby="dropdownSubMenu2" class="dropdown-menu border-0 shadow">
|
||||
<li>
|
||||
<a tabindex="-1" href="#" class="dropdown-item">level 2</a>
|
||||
</li>
|
||||
|
||||
<!-- Level three dropdown-->
|
||||
<li class="dropdown-submenu">
|
||||
<a id="dropdownSubMenu3" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-item dropdown-toggle">level 2</a>
|
||||
<ul aria-labelledby="dropdownSubMenu3" class="dropdown-menu border-0 shadow">
|
||||
<li><a href="#" class="dropdown-item">3rd level</a></li>
|
||||
<li><a href="#" class="dropdown-item">3rd level</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<!-- End Level three -->
|
||||
<!-- Level three dropdown-->
|
||||
<li class="dropdown-submenu">
|
||||
<a id="dropdownSubMenu3" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="dropdown-item dropdown-toggle">level 2</a>
|
||||
<ul aria-labelledby="dropdownSubMenu3" class="dropdown-menu border-0 shadow">
|
||||
<li><a href="#" class="dropdown-item">3rd level</a></li>
|
||||
<li><a href="#" class="dropdown-item">3rd level</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<!-- End Level three -->
|
||||
|
||||
<li><a href="#" class="dropdown-item">level 2</a></li>
|
||||
<li><a href="#" class="dropdown-item">level 2</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<!-- End Level two -->
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<li><a href="#" class="dropdown-item">level 2</a></li>
|
||||
<li><a href="#" class="dropdown-item">level 2</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<!-- End Level two -->
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- SEARCH FORM -->
|
||||
<form class="form-inline ml-3">
|
||||
<div class="input-group input-group-sm">
|
||||
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-navbar" type="submit">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
<!-- SEARCH FORM -->
|
||||
<form class="form-inline ml-0 ml-md-3">
|
||||
<div class="input-group input-group-sm">
|
||||
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-navbar" type="submit">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Right navbar links -->
|
||||
<ul class="navbar-nav ml-auto">
|
||||
<ul class="order-1 order-md-3 navbar-nav navbar-no-expand ml-auto">
|
||||
<!-- Messages Dropdown Menu -->
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link" data-toggle="dropdown" href="#">
|
||||
|
|
|
|||
Loading…
Reference in New Issue