We use cookies to ensure you get the best experience on our website
Home Explore Help
Sign In
mirror
/
assets
mirror of https://github.com/vladimirok5959/assets.git
2
0
Fork 0
Files Wiki
Browse Source

Navbar

Volodymyr Tkach 2 years ago
parent
ffaafda53b
commit
6579e43027
3 changed files with 151 additions and 2 deletions
Split View Show Diff Stats
  1. 28 1
      css/layouts/cp2/example-sidebar-1.html
  2. 28 1
      css/layouts/cp2/example-sidebar-2.html
  3. 95 0
      css/layouts/cp2/navbar.css

+ 28 - 1
css/layouts/cp2/example-sidebar-1.html
View File 

@@ -8,11 +8,38 @@
 
 		<link rel="stylesheet" href="./../../reboot.css">
 
 		<link rel="stylesheet" href="./../../grid.css">
 
 		<link rel="stylesheet" href="./base.css">
 
+		<link rel="stylesheet" href="./navbar.css">
 
 	</head>
 
 	<body class="sidebars-1">
 
 		<header>
 
 			<div class="container-fluid">
 
-				Header
 
+				<nav>
 
+					<div class="navbar-header">
 
+						<a href="#" class="navbar-brand">Navigation Bar</a>
 
+						<a href="#" class="navbar-toggle" onclick="m=document.getElementById('navbarCollapse');if(m.className=='navbar-nav closed'){m.className='navbar-nav';}else{m.className='navbar-nav closed';}return false;">
 
+							<svg fill="#fff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px">
 
+								<path d="M 3 7 A 1.0001 1.0001 0 1 0 3 9 L 27 9 A 1.0001 1.0001 0 1 0 27 7 L 3 7 z M 3 14 A 1.0001 1.0001 0 1 0 3 16 L 27 16 A 1.0001 1.0001 0 1 0 27 14 L 3 14 z M 3 21 A 1.0001 1.0001 0 1 0 3 23 L 27 23 A 1.0001 1.0001 0 1 0 27 21 L 3 21 z" />
 
+							</svg>
 
+						</a>
 
+						<ul class="navbar-nav closed" id="navbarCollapse">
 
+							<li class="nav-item">
 
+								<a href="#" class="nav-link">Item 1</a>
 
+							</li>
 
+							<li class="nav-item">
 
+								<a href="#" class="nav-link">Item 2</a>
 
+							</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>
 
+				</nav>
 
 			</div>
 
 		</header>
 
 		<div class="container-fluid">

+ 28 - 1
css/layouts/cp2/example-sidebar-2.html
View File 

@@ -8,11 +8,38 @@
 
 		<link rel="stylesheet" href="./../../reboot.css">
 
 		<link rel="stylesheet" href="./../../grid.css">
 
 		<link rel="stylesheet" href="./base.css">
 
+		<link rel="stylesheet" href="./navbar.css">
 
 	</head>
 
 	<body class="sidebars-2">
 
 		<header>
 
 			<div class="container-fluid">
 
-				Header
 
+				<nav>
 
+					<div class="navbar-header">
 
+						<a href="#" class="navbar-brand">Navigation Bar</a>
 
+						<a href="#" class="navbar-toggle" onclick="m=document.getElementById('navbarCollapse');if(m.className=='navbar-nav closed'){m.className='navbar-nav';}else{m.className='navbar-nav closed';}return false;">
 
+							<svg fill="#fff" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px">
 
+								<path d="M 3 7 A 1.0001 1.0001 0 1 0 3 9 L 27 9 A 1.0001 1.0001 0 1 0 27 7 L 3 7 z M 3 14 A 1.0001 1.0001 0 1 0 3 16 L 27 16 A 1.0001 1.0001 0 1 0 27 14 L 3 14 z M 3 21 A 1.0001 1.0001 0 1 0 3 23 L 27 23 A 1.0001 1.0001 0 1 0 27 21 L 3 21 z" />
 
+							</svg>
 
+						</a>
 
+						<ul class="navbar-nav closed" id="navbarCollapse">
 
+							<li class="nav-item">
 
+								<a href="#" class="nav-link">Item 1</a>
 
+							</li>
 
+							<li class="nav-item">
 
+								<a href="#" class="nav-link">Item 2</a>
 
+							</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>
 
+				</nav>
 
 			</div>
 
 		</header>
 
 		<div class="container-fluid">

+ 95 - 0
css/layouts/cp2/navbar.css
View File 

@@ -0,0 +1,95 @@
 
+header nav {
 
+	margin: -8px -15px;
 
+}
 
+
 
+.navbar-header {
 
+	position: relative;
 
+}
 
+
 
+.navbar-brand {
 
+	color: #fff;
 
+	float: left;
 
+	font-size: 18px;
 
+	height: 56px;
 
+	line-height: 20px;
 
+	padding: 17px 15px;
 
+}
 
+
 
+.navbar-brand:hover {
 
+	color: #fff;
 
+}
 
+
 
+.navbar-toggle {
 
+	border-radius: 4px;
 
+	border: 1px solid #fff;
 
+	float: right;
 
+	margin-bottom: 8px;
 
+	margin-right: 15px;
 
+	margin-top: 8px;
 
+	padding: 4px 10px;
 
+}
 
+
 
+.navbar-nav {
 
+	-ms-flex-direction: column;
 
+	background-color: #205081;
 
+	border-radius: 4px;
 
+	border: 1px solid #fff;
 
+	display: -ms-flexbox;
 
+	display: flex;
 
+	flex-direction: column;
 
+	left: 15px;
 
+	list-style: none;
 
+	margin: 0;
 
+	padding: 0;
 
+	position: absolute;
 
+	right: 15px;
 
+	top: 47px;
 
+}
 
+
 
+.navbar-nav.closed {
 
+	display: none;
 
+}
 
+
 
+.nav-item {
 
+	border-bottom: 1px solid #35689c;
 
+}
 
+
 
+.nav-link {
 
+	color: #fff;
 
+	display: block;
 
+	padding: 8px 15px;
 
+}
 
+
 
+.nav-link:hover {
 
+	color: #fff;
 
+}
 
+
 
+@media (min-width: 768px) {
 
+	.navbar-toggle {
 
+		display: none;
 
+	}
 
+
 
+	.navbar-nav {
 
+		background-color: transparent;
 
+		border: none;
 
+		display: block;
 
+		height: 56px;
 
+		position: static;
 
+	}
 
+
 
+	.navbar-nav.closed {
 
+		display: block;
 
+	}
 
+
 
+	.nav-item {
 
+		display: block;
 
+		float: left;
 
+		height: 56px;
 
+	}
 
+
 
+	.nav-link {
 
+		height: 56px;
 
+		line-height: 20px;
 
+		padding: 17px 15px;
 
+	}
 
+}