Browse Source

Sidebar menu

Volodymyr Tkach 2 years ago
parent
commit
0f044d66a9
3 changed files with 125 additions and 30 deletions
  1. 79 30
      css/layouts/cp2/example-sidebar-1.html
  2. 6 0
      css/layouts/cp2/navbar.css
  3. 40 0
      css/layouts/cp2/sidebar-navbar.css

+ 79 - 30
css/layouts/cp2/example-sidebar-1.html

@@ -9,6 +9,7 @@
 		<link rel="stylesheet" href="./../../grid.css" />
 		<link rel="stylesheet" href="./base.css" />
 		<link rel="stylesheet" href="./navbar.css" />
+		<link rel="stylesheet" href="./sidebar-navbar.css" />
 	</head>
 	<body class="sidebars-1">
 		<header>
@@ -46,36 +47,84 @@
 			<div class="row main">
 				<div class="col-12 col-sm-4 col-md-4 col-lg-3 col-xl-2 sidebar sidebar-left order-1">
 					<div class="scroll">
-						Sidebar 1<br>
-						Sidebar 1<br>
-						Sidebar 1<br>
-						Sidebar 1<br>
-						Sidebar 1<br>
-						Sidebar 1<br>
-						Sidebar 1<br>
-						Sidebar 1<br>
-						Sidebar 1<br>
-						Sidebar 1<br>
-						Sidebar 1<br>
-						Sidebar 1<br>
-						Sidebar 1<br>
-						Sidebar 1<br>
-						Sidebar 1<br>
-						Sidebar 1<br>
-						Sidebar 1<br>
-						Sidebar 1<br>
-						Sidebar 1<br>
-						Sidebar 1<br>
-						Sidebar 1<br>
-						Sidebar 1<br>
-						Sidebar 1<br>
-						Sidebar 1<br>
-						Sidebar 1<br>
-						Sidebar 1<br>
-						Sidebar 1<br>
-						Sidebar 1<br>
-						Sidebar 1<br>
-						Sidebar 1<br>
+						<ul class="navbar-nav">
+							<li class="nav-item">
+								<a href="#" class="nav-link">Item 1</a>
+								<ul>
+									<li class="nav-item">
+										<a href="#" class="nav-link">Item 1. 1.</a>
+									</li>
+								</ul>
+							</li>
+							<li class="nav-item">
+								<a href="#" class="nav-link">Item 2</a>
+								<ul>
+									<li class="nav-item">
+										<a href="#" class="nav-link">Item 2. 1.</a>
+									</li>
+									<li class="nav-item">
+										<a href="#" class="nav-link">Item 2. 2.</a>
+									</li>
+									<li class="nav-item">
+										<a href="#" class="nav-link">Item 2. 3.</a>
+									</li>
+									<li class="nav-item">
+										<a href="#" class="nav-link">Item 2. 4.</a>
+									</li>
+									<li class="nav-item">
+										<a href="#" class="nav-link">Item 2. 5.</a>
+									</li>
+								</ul>
+							</li>
+							<li class="nav-item">
+								<a href="#" class="nav-link">Item 3</a>
+							</li>
+							<li class="nav-item">
+								<a href="#" class="nav-link">Item 4</a>
+							</li>
+							<li class="nav-item">
+								<a href="#" class="nav-link">Item 5</a>
+							</li>
+						</ul>
+						<ul class="navbar-nav">
+							<li class="nav-item">
+								<a href="#" class="nav-link">Item 1</a>
+								<ul>
+									<li class="nav-item">
+										<a href="#" class="nav-link">Item 1. 1.</a>
+									</li>
+								</ul>
+							</li>
+							<li class="nav-item">
+								<a href="#" class="nav-link">Item 2</a>
+								<ul>
+									<li class="nav-item">
+										<a href="#" class="nav-link">Item 2. 1.</a>
+									</li>
+									<li class="nav-item">
+										<a href="#" class="nav-link">Item 2. 2.</a>
+									</li>
+									<li class="nav-item">
+										<a href="#" class="nav-link">Item 2. 3.</a>
+									</li>
+									<li class="nav-item">
+										<a href="#" class="nav-link">Item 2. 4.</a>
+									</li>
+									<li class="nav-item">
+										<a href="#" class="nav-link">Item 2. 5.</a>
+									</li>
+								</ul>
+							</li>
+							<li class="nav-item">
+								<a href="#" class="nav-link">Item 3</a>
+							</li>
+							<li class="nav-item">
+								<a href="#" class="nav-link">Item 4</a>
+							</li>
+							<li class="nav-item">
+								<a href="#" class="nav-link">Item 5</a>
+							</li>
+						</ul>
 					</div>
 				</div>
 				<div class="col-12 col-sm-8 col-md-8 col-lg-9 col-xl-10 content order-3">

+ 6 - 0
css/layouts/cp2/navbar.css

@@ -49,6 +49,12 @@ header nav {
 	top: 47px;
 }
 
+.navbar-nav ul {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
 .navbar-nav.closed {
 	display: none;
 }

+ 40 - 0
css/layouts/cp2/sidebar-navbar.css

@@ -0,0 +1,40 @@
+.sidebar .navbar-nav {
+	background-color: transparent;
+	border: none;
+	border-bottom: 1px solid #d6d6d6;
+	display: block;
+	height: auto;
+	margin-bottom: 15px;
+	margin-left: -15px;
+	margin-right: -15px;
+	padding-bottom: 15px;
+	position: static;
+}
+
+.sidebar .navbar-nav:last-child {
+	border-bottom: none;
+	margin-bottom: 0px;
+	padding-bottom: 0px;
+}
+
+.sidebar .nav-item {
+	border-bottom: none;
+	float: none;
+	height: auto;
+	padding-left: 15px;
+}
+
+.sidebar .nav-link {
+	color: #1e375a;
+	display: inline;
+	height: auto;
+	padding: 0px;
+}
+
+.sidebar ul.navbar-nav .nav-link {
+	font-weight: bold;
+}
+
+.sidebar  ul.navbar-nav ul .nav-link {
+	font-weight: normal;
+}