Skip to content

Instantly share code, notes, and snippets.

@varren

varren/index.html

Created November 25, 2017 01:31
Show Gist options
  • Save varren/1c2cad7abf13d57f2669076e496fe282 to your computer and use it in GitHub Desktop.
Save varren/1c2cad7abf13d57f2669076e496fe282 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Home</title>
<style type="text/css">
.dropdown-communities{
padding: 15px;
}
@media (min-width: 1200px) {
.dropdown-communities {
min-width: 900px
}
}
/*INITIAL VERSION */
.navbar-collapse {
height: 100vh;
}
.dropdown-communities {
text-transform: uppercase;
overflow-y: hidden;
}
/*WORKING VERSION
.navbar-collapse {
height: 90vh; !*<= STEP №3 CHANGE THIS TO 90 OR LOWER BECAUSE YOU HAVE .navbar-header AND IT ALSO TAKES SOME SCREEN*!
max-height: 100vh !important; !*<= STEP №2 ADD THIS SO WE CAN MAKE THE NAVBAR FULLSCREEN*!
}
.dropdown-communities {
text-transform: uppercase;
!*overflow-y: hidden; !*!* <= STEP №1 REMOVE THIS SO WE CAN REMOVE GLITCHING*!
}*/
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script type="text/javascript">
$(document).ready(function () {
$(".dropdown").hover(function () {
$(this).addClass("open")
}, function () {
$(this).removeClass("open")
})
});
</script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Home</a>
</div>
<div class="navbar-collapse collapse in" aria-expanded="true" style="">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"
aria-expanded="true">
SECTION 1
</a>
<div class="dropdown-menu dropdown-communities" role="menu">
<div class="row current-communities">
<div class="col-md-4">
<h4>SUB-SECTION 1</h4>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>SUB-SECTION 2</h4>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>SUB-SECTION 3</h4>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
<hr class="current-communities-hr">
<div class="row upcoming-communities">
<div class="col-md-4">
<h4>HEADER 1</h4>
<ul>
<li><a href="#">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>HEADER 2</h4>
<ul>
<li><a href="#">Link</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>HEADER 3</h4>
<ul>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</div>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
SECTION 2
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
SECTION 3
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
SECTION 4
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div style="height: 500px">Content 1</div>
<div style="height: 500px">Content 2</div>
<div style="height: 500px">Content 1</div>
<div style="height: 500px">Content 2</div>
<div style="height: 500px">Content 1</div>
<div style="height: 500px">Content 2</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment