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
|
// Color variants
|
||||||
@each $color, $value in $theme-colors {
|
@each $color, $value in $theme-colors {
|
||||||
@if $color == dark or $color == light {
|
@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">
|
<div class="wrapper">
|
||||||
|
|
||||||
<!-- Navbar -->
|
<!-- 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">
|
<div class="container">
|
||||||
<a href="index3.html" class="navbar-brand">
|
<a href="index3.html" class="navbar-brand">
|
||||||
<img src="../../dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
|
<img src="../../dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
|
||||||
style="opacity: .8">
|
style="opacity: .8">
|
||||||
<span class="brand-text font-weight-light">AdminLTE 3</span>
|
<span class="brand-text font-weight-light">AdminLTE 3</span>
|
||||||
</a>
|
</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 -->
|
<div class="collapse navbar-collapse order-3" id="navbarCollapse">
|
||||||
<ul class="navbar-nav">
|
<!-- Left navbar links -->
|
||||||
<li class="nav-item">
|
<ul class="navbar-nav">
|
||||||
</li>
|
<li class="nav-item">
|
||||||
<li class="nav-item d-none d-sm-inline-block">
|
<a href="index3.html" class="nav-link">Home</a>
|
||||||
<a href="index3.html" class="nav-link">Home</a>
|
</li>
|
||||||
</li>
|
<li class="nav-item">
|
||||||
<li class="nav-item d-none d-sm-inline-block">
|
<a href="#" class="nav-link">Contact</a>
|
||||||
<a href="#" class="nav-link">Contact</a>
|
</li>
|
||||||
</li>
|
<li class="nav-item dropdown">
|
||||||
<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>
|
||||||
<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">
|
||||||
<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 action </a></li>
|
<li><a href="#" class="dropdown-item">Some other 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-->
|
<!-- Level two dropdown-->
|
||||||
<li class="dropdown-submenu dropdown-hover">
|
<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>
|
<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">
|
<ul aria-labelledby="dropdownSubMenu2" class="dropdown-menu border-0 shadow">
|
||||||
<li>
|
<li>
|
||||||
<a tabindex="-1" href="#" class="dropdown-item">level 2</a>
|
<a tabindex="-1" href="#" class="dropdown-item">level 2</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<!-- Level three dropdown-->
|
<!-- Level three dropdown-->
|
||||||
<li class="dropdown-submenu">
|
<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>
|
<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">
|
<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>
|
||||||
<li><a href="#" class="dropdown-item">3rd level</a></li>
|
<li><a href="#" class="dropdown-item">3rd level</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<!-- End Level three -->
|
<!-- End Level three -->
|
||||||
|
|
||||||
<li><a href="#" class="dropdown-item">level 2</a></li>
|
<li><a href="#" class="dropdown-item">level 2</a></li>
|
||||||
<li><a href="#" class="dropdown-item">level 2</a></li>
|
<li><a href="#" class="dropdown-item">level 2</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<!-- End Level two -->
|
<!-- End Level two -->
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<!-- SEARCH FORM -->
|
<!-- SEARCH FORM -->
|
||||||
<form class="form-inline ml-3">
|
<form class="form-inline ml-0 ml-md-3">
|
||||||
<div class="input-group input-group-sm">
|
<div class="input-group input-group-sm">
|
||||||
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
|
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
|
||||||
<div class="input-group-append">
|
<div class="input-group-append">
|
||||||
<button class="btn btn-navbar" type="submit">
|
<button class="btn btn-navbar" type="submit">
|
||||||
<i class="fas fa-search"></i>
|
<i class="fas fa-search"></i>
|
||||||
</button>
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</form>
|
||||||
</form>
|
</div>
|
||||||
|
|
||||||
<!-- Right navbar links -->
|
<!-- 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 -->
|
<!-- Messages Dropdown Menu -->
|
||||||
<li class="nav-item dropdown">
|
<li class="nav-item dropdown">
|
||||||
<a class="nav-link" data-toggle="dropdown" href="#">
|
<a class="nav-link" data-toggle="dropdown" href="#">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue