I have a requirement create navigation menu tabs, each tab has child tab like drop-down menu. Whenever I click on the each tab corresponding content should display (same for sub tab also). I am facing css issue how to display correctly the sub tabs related to menu and also need to display sub tab related content when i click on it.can anyone help me on this?
$(document).ready(function(){
$('ul#myNavUl li').on("click", (function(e) {
// Add selected class to clicked tab
$(this).addClass('selected').siblings().removeClass('selected');
// Determine selected li index in respect to parent ul
var tabIndex = $(this).index();
// Find article respective to selected tab
var article = $(this).closest('.content').find('.articles').children().eq(tabIndex);
// Add selected class to respective article
article.addClass('selected').siblings().removeClass('selected');
var parentH = $('ul#myNavUl li ul').parent().height();
$('ul#myNavUl li ul').css('top', parentH);
$('ul#myNavUl li ').hover(function(){
$('ul', this).show();
}, function(){
$('ul', this).hide();
});
}));
});
body {
background-color: #333;
font-family: "Open Sans Condensed";
margin: 0;
}
.content {
width: 100%;
margin: 0 auto;
padding: 12px;
}
.article {
display: none;
margin: 100px auto 0;
width: 1024px;
padding: 8px 12px;
border-radius: 5px;
background-color: #f9f9f9;
}
.article.selected {
display: block;
}
.article h2, .article p {
color: #2a2a2a;
}
ul#myNavUl {
list-style: none;
text-align: center;
color: #fff;
}
ul#myNavUl li {
position: relative;
width: 15%;
margin: 0 4px;
padding: 15px;
float: left;
background-color: #0077bb;
}
ul#myNavUl li:hover {
background-color: #00aaee;
}
ul#myNavUl li.selected {
background-color: #00aaee;
}
ul#myNavUl li.selected::after {
position: absolute;
display: block;
width: 0;
bottom: -15px;
left: calc(50% - 15px);
content: "";
border-width: 15px 15px 0;
border-style: solid;
border-color: #00aaee transparent;
}
ul#myNavUl li a{
text-decoration: none;
color: white;
}
ul#myNavUl li ul{
position:absolute;
left:0;
display:none;
}
<div class="content">
<div class="tabs">
<ul id="myNavUl">
<li class="selected">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4
<ul><!-- added drop-down items -->
<li><a href="#son-of-tab3" >drop-down 1</a></li>
<li><a href="#son-of-tab3" >drop-down 2</a></li>
<li><a href="#son-of-tab3" >drop-down 3</a></li>
</ul>
</li>
</ul>
</div>
<div class="articles">
<div class="article selected">
<h2>Article 1</h2>
</div>
<div class="article">
<h2>Article 2</h2>
</div>
<div class="article">
<h2>Article 3</h2>
</div>
<div class="article">
<h2>Article 4</h2>
</div>
<div class="article">
<h2>Article 5</h2>
</div>
</div>
</div>
I build for you a container with tabs and screens,
let me know if that what you looking for.
html:
<div id="tp--nav-bar">
<ul id="nav-bar--list">
<li class="controler">
<a>home</a>
<ul class="screen">
<li><a>page</a></li>
<li><a>page</a></li>
</ul>
</li>
<li class="controler">
<a>about</a>
<ul class="screen">
<li><a>page</a></li>
<li><a>page</a></li>
</ul>
</li>
<li class="controler">
<a>gallery</a>
<ul class="screen">
<li><a>page</a></li>
<li><a>page</a></li>
</ul>
</li>
<li class="controler">
<a>contact</a>
<ul class="screen">
<li><a>page</a></li>
<li><a>page</a></li>
</ul>
</li>
</ul>
</div>
scss:
#mixin transition($ease, $s) {
-webkit-transition: $ease $s;
-moz-transition: $ease $s;
-ms-transition: $ease $s;
-o-transition: $ease $s;
transition: $ease $s;
}
#mixin translate($x, $y) {
-webkit-transform: translate($x,$y);
-moz-transform: translate($x,$y);
-ms-transform: translate($x,$y);
-o-transform: translate($x,$y);
transform: translate($x,$y);
}
#nav-bar--list {
font-family: 'Raleway', sans-serif;
> li {
cursor: pointer;
position: relative;
display: inline-block;
float: left;
width: 25%;
height: 50px;
line-height: 50px;
text-align: center;
background: #00aaee;
color: #fff;
overflow: hidden;
a {
display: block;
width: 100%;
height: 100%;
}
}
> li.active {
background: #007eb1;
overflow: visible;
}
> li:hover {
background: #007eb1;
}
}
.screen {
position: absolute;
top: 100%;
left: 0;
width: 100%;
line-height: 40px;
text-align: center;
background: #00aaee;
color: #fff;
z-index: -1;
opacity: 0;
#include translate(0px, 50px);
#include transition(cubic-bezier(0.4, 0.1, 0, 1.6), 0.45s);
li:hover {
background: #007eb1;
a {
color: #fff;
text-decortion: none;
}
}
}
.screen.active {
z-index: 1;
opacity: 1;
#include translate(0px, 0px);
}
jQuery:
$(document).ready(function() {
tabPanel('#tp--nav-bar')
});
function tabPanel(element) {
var container = $(element),
controlers = container.find('.controler'),
screens = container.find('.screen'),
map = {};
for (i = 0; i < controlers.length; i++) {
var control = controlers[i],
screen = screens[i],
controler = 'controler-' + i,
screener = 'screener-' + i;
$(control).attr('id', controler);
$(screen).attr('id', screener);
map[controler] = screener;
};
controlers.click(function() {
var controlerId = $(this).attr('id'),
controlerClass = $(this).attr('class'),
controlerClass = controlerClass.indexOf('active');
if (controlerClass == -1) {
controlers.removeClass('active');
screens.removeClass('active');
$('#' + map[controlerId]).addClass('active');
$('#' + controlerId).addClass('active');
}
});
}
My Fiddle
I checked your code and looked in the console of the browser; it has one jQuery error like $ is not defined. I think you forget to add jQuery library; that's the way this error occurs. Add jQuery file or you can use jQuery cdn also like this.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Add this line add before the </body> tag and then check if it works.
Related
I want to create a vertical scrolling div with an active indicators. However I'm having trouble with it event firing on the div targeted. I set it to window.addEventListener it works fine at full height of the window but if I set it to div.addEventListener it's not firing inside of the element at all. I'm Hoping someone has some pointer for this. Here's what I got so far.
section.scroller {
max-width: 900px;
margin: auto;
background: antiquewhite;
scroll-behavior: smooth;
position: relative;
width: 100%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
padding-right: 17px;
// padding: 0 17px;
box-sizing: content-box;
}
.sec {
min-height: 100vh;
// width: 100vw;
display: flex;
align-items: center;
justify-content: center;
scroll-behavior: smooth;
// width: 100%;
&:nth-child(odd) {
background: #ddd;
}
}
.lnbNavbar {
top: 50%;
transform: translateY(-50%);
margin: 0;
padding: 0;
border-radius: 15px;
transition: opacity .4s ease .2s;
opacity: 0;
position: relative;
float: right;
transition: .3s all;
ul {
list-style: none;
padding: 0;
margin: 0;
li {
width: 0px;
position: relative;
text-align: right;
.dot {
border: 2px solid#333;
width: 10px;
height: 10px;
display: inline-block;
border-radius: 50%;
transition: .2s ease;
span {
display: inline-block;
}
}
}
}
}
.lnbNavbar ul li a:active,
.lnbNavbar ul li a:hover {
border-color: rgb(124, 7, 7);
background-color: gray;
transform: scale(1.8);
}
.lnbNavbar ul li.active a,
.lnbNavbar ul li:hover a {
border-color: rgb(124, 7, 7);
background-color: gray;
transform: scale(1.8);
}
.outter {
width: 800px;
height: 500px;
margin: auto;
overflow: hidden;
}
<div class="outter" id="outter">
<section class="scroller" id="scroller">
<nav class="lnbNavbar">
<ul>
<li class="home active">
<a href="#home" class=" home dot">
<span></span>
</a>
</li>
<li class="about">
<a href="#about" class="about dot">
<span></span>
</a>
</li>
<li class="service">
<a href="#service" class="service dot">
<span></span>
</a>
</li>
<li class="project">
<a href="#project" class="project dot">
<span></span>
</a>
</li>
<li class="contact">
<a href="#contact" class="contact dot">
<span></span>
</a>
</li>
</ul>
</nav>
<section class="sec" id="about"><h4>about</h4></section>
<section class="sec" id="service"><h4>service</h4></section>
<section class="sec" id="project"><h4>project</h4></section>
<section class="sec" id="contact"><h4>contact</h4></section>
<section class="sec" id="home"><h4>home</h4></section>
</section>
<script>
const sections = document.querySelectorAll('section');
const navLi = document.querySelectorAll('.lnbNavbar ul li');
const div = document.getElementById("outter")[0];
div.addEventListener('scroll', ()=> {
let current = '';
sections.forEach( section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if(pageYOffset >= (sectionTop - sectionHeight / 4)){
current = section.getAttribute('id');
}
})
console.log(current);
navLi.forEach( li => {
li.classList.remove('active');
if(li.classList.contains(current)){
li.classList.add('active')
}
})
})
</script>
</div>
I am making a menu with pure Vanilla JS, because I want it to implement it in an Angular 8 project.
It is working good at some point, because it opens the hidden menu very good. The thing is that when I want to open a second level hidden menu , then it closes everything. For example if you click in 'Soluciones' link, then it opens the submenu very good. After that you must be able to click 'Correo y herramientas' in order to show a second level hidden menu, which is: Correo 1, Correo 2, Correo 3 links; but before showing this last links, it closes everything.
I have a codepen link to show this: https://codepen.io/Bungo808/pen/ZEBpmXG
Any advice would be helpfull!!
My HTML
<div class="red">
<nav id="nav" class="sub-menu open">
<ul class="list-unstyled">
<li id="subb">
<a class="link">Quiénes somos</a>
<img id="iplus" class="splus" src="../../assets/img/splus.svg" alt="">
<ul id="smenu" >
<li>
<a class="link">Sobre eSource</a>
</li>
<li>
<a class="link">Amarello</a>
</li>
</ul>
</li>
<li id="subb">
<a class="link">Soluciones</a>
<img id="iplus" class="splus" src="../../assets/img/splus.svg" alt="">
<ul id="smenu" >
<li id="subb">
<a class="link">Correo y herramientas</a>
<ul>
<li><a class="link">Correo 1</a></li>
<li><a class="link">Correo 2</a></li>
<li><a class="link">Correo 3</a></li>
</ul>
</li>
<li id="subb">
<a class="link">Infrastructure as a Service</a>
<ul>
<li><a class="link">Infra 1</a></li>
<li><a class="link">Infra 2</a></li>
<li><a class="link">Infra 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<div class="overlay"></div>
</div>
My JS
let list_items = document.querySelectorAll('#subb');
// Show Submenu
for (let i = 0; i < list_items.length; i++) {
list_items[i].addEventListener("click", show);
}
function show() {
this.classList.toggle("myClass");
console.log('I clicked it!')
}
A part of my CSS, which is the responsible to open the hidden menu
.sub-menu {
padding: 0 0 0 2%;
left: 0px;
top: 0;
transition: all 0.3s ease;
height: 100%;
width: 280px;
position: fixed;
margin: 0;
background-color: #f9f9f9;
border-radius: 0;
z-index: 10;
overflow: hidden;
}
.sub-menu > ul {
width: 100%;
height: 100%;
margin-top: 60px;
}
.sub-menu li {
position: relative;
display: block;
list-style: none;
padding: 2px 0 2px 14px;
margin-left: 0;
cursor: pointer;
color: white;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
&:first-child{
// border: 1px solid red;
}
}
.sub-menu li a {
color: #40465f;
font-size: 16px;
font-weight: 300;
width: 100%;
display: block;
line-height: 22px;
padding: 6px 0;
&:hover{
color: #2487FC;
text-decoration: none;
}
}
.sub-menu ul ul li a {
color: #40465f;
font-size: 14px;
font-weight: 300;
width: 100%;
line-height: 22px;
padding: 6px 0;
&:hover{
color: #2487FC;
text-decoration: none;
}
}
.sub-menu ul ul ul li a {
color: #40465f;
font-size: 14px;
font-weight: 300;
width: 100%;
display: block;
line-height: 22px;
padding: 6px 0;
&:hover{
color: #2487FC;
text-decoration: none;
}
}
.sub-menu ul ul{
display: none;
background: white;
}
#subb.myClass > ul{
display: block;
}
.sub-menu ul ul ul{
display: none;
border: 1px solid red;
}
The click event is propagating over and over again. So eventually the class gets toggled off. To prevent this add .stopPropagation(); to your show() function like this:
function show(e) {
e.stopPropagation();
this.classList.toggle("myClass");
console.log('I clicked it!')
}
I'm trying to customise a menu I've found on CodePen. Here's what I've found.
What I'm trying to do is modify it so that the menu closes after you click on an item, or if you click outside the menu. I've tried various things but can't seem to get it to work.
Here's my html:
<!-- new hamburger menu be here -->
<div id="menu-main">
<div id="menu-wrapper">
<div id="hamburger-menu"><span></span><span></span><span></span></div>
<!-- hamburger-menu -->
</div>
<!-- menu-wrapper -->
<ul class="menu-list accordion">
<li id="nav1">
<a class="menu-link" href="index.html">Home</a>
</li>
<li id="nav2">
<a class="menu-link" href="#about">About the Project</a>
</li>
<li id="nav3">
<a class="menu-link" href="#timeline">Timeline</a>
</li>
<li id="nav4">
<a class="menu-link" href="#vision">The Vision</a>
</li>
<li id="nav5">
<a class="menu-link" href="#where">Where We Are</a>
</li>
<li id="nav6">
<a class="menu-link" href="#news">Stay In Touch</a>
</li>
<li id="nav7">
<a class="menu-link" href="#faq">FAQ</a>
</ul>
</div>
Here's my JavaScript
$(function() {
function slideMenu() {
var activeState = $("#menu-main .menu-list").hasClass("active");
$("#menu-main .menu-list").animate({left: activeState ? "0%" : "-100%"}, 400);
}
$("#menu-wrapper").click(function(event) {
event.stopPropagation();
$("#hamburger-menu").toggleClass("open");
$("#menu-main .menu-list").toggleClass("active");
slideMenu();
$("body").toggleClass("overflow-hidden");
});
$(".menu-list").find(".accordion-toggle").click(function() {
$(this).next().toggleClass("open").slideToggle("fast");
$(this).toggleClass("active-tab").find(".menu-link").toggleClass("active");
$(".menu-list .accordion-content").not($(this).next()).slideUp("fast").removeClass("open");
$(".menu-list .accordion-toggle").not(jQuery(this)).removeClass("active-tab").find(".menu-link").removeClass("active");
});
}); // jQuery load
I've tried adding in various classes in this bit as I believe this is what controls the code but no luck:
$(".menu-list").find(".accordion-toggle").click(function() {
$(this).next().toggleClass("open").slideToggle("fast");
$(this).toggleClass("active-tab").find(".menu-link").toggleClass("active");
$(".menu-list .accordion-content").not($(this).next()).slideUp("fast").removeClass("open");
$(".menu-list .accordion-toggle").not(jQuery(this)).removeClass("active-tab").find(".menu-link").removeClass("active");
});
Would love some help with this.
You can add a check on document click to see if an element has been clicked our the user clicked outside the menu div.
$(function() {
function slideMenu() {
var activeState = $("#menu-container .menu-list").hasClass("active");
$("#menu-container .menu-list").animate({
left: activeState ? "0%" : "-100%"
}, 400);
}
$("#menu-wrapper").click(function(event) {
event.stopPropagation();
$("#hamburger-menu").toggleClass("open");
$("#menu-container .menu-list").toggleClass("active");
slideMenu();
$("body").toggleClass("overflow-hidden");
});
$(".menu-list").find(".accordion-toggle").click(function() {
$(this).next().toggleClass("open").slideToggle("fast");
$(this).toggleClass("active-tab").find(".menu-link").toggleClass("active");
$(".menu-list .accordion-content").not($(this).next()).slideUp("fast").removeClass("open");
$(".menu-list .accordion-toggle").not(jQuery(this)).removeClass("active-tab").find(".menu-link").removeClass("active");
});
$(document).on("click", function(e) {
let isLink = jQuery(e.target).is(".accordion-content a");
let isOutside = jQuery(e.target).closest("#menu-container").length == 0;
if (isLink || isOutside)
$("#menu-wrapper").trigger("click");
})
}); // jQuery load
ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
body {
font-family: 'Dosis', sans-serif;
background: #FF5722;
}
#menu-wrapper {
overflow: hidden;
max-width: 100%;
cursor: pointer;
}
#menu-wrapper #hamburger-menu {
position: relative;
width: 25px;
height: 20px;
margin: 15px;
}
#menu-wrapper #hamburger-menu span {
opacity: 1;
left: 0;
display: block;
width: 100%;
height: 2px;
border-radius: 10px;
color: black;
background-color: white;
position: absolute;
transform: rotate(0deg);
transition: .4s ease-in-out;
}
#menu-wrapper #hamburger-menu span:nth-child(1) {
top: 0;
}
#menu-wrapper #hamburger-menu span:nth-child(2) {
top: 9px;
}
#menu-wrapper #hamburger-menu span:nth-child(3) {
top: 18px;
}
#menu-wrapper #hamburger-menu.open span:nth-child(1) {
transform: translateY(9px) rotate(135deg);
}
#menu-wrapper #hamburger-menu.open span:nth-child(2) {
opacity: 0;
transform: translateX(-60px);
}
#menu-wrapper #hamburger-menu.open span:nth-child(3) {
transform: translateY(-9px) rotate(-135deg);
}
#menu-container .menu-list .menu-submenu {
padding-top: 20px;
padding-bottom: 20px;
}
#menu-container .menu-list {
padding-left: 0;
display: block;
position: absolute;
width: 100%;
max-width: 450px;
background: white;
box-shadow: rgba(100, 100, 100, 0.2) 6px 2px 10px;
z-index: 999;
overflow-y: auto;
overflow-x: hidden;
left: -100%;
}
#menu-container .menu-list li.accordion-toggle,
#menu-container .menu-list .menu-login {
font-size: 16px;
padding: 20px;
text-transform: uppercase;
border-top: 1px solid #dbdcd2;
}
#menu-container .menu-list li:first-of-type {
border-top: 0;
}
.accordion-toggle,
.accordion-content {
cursor: pointer;
font-size: 16px;
position: relative;
letter-spacing: 1px;
}
.accordion-content {
display: none;
}
.accordion-toggle a:before,
.accordion-toggle a:after {
content: '';
display: block;
position: absolute;
top: 50%;
right: 30px;
width: 15px;
height: 2px;
margin-top: -1px;
background-color: #5a5858;
transform-origin: 50% 50%;
transition: all 0.3s ease-out;
}
.accordion-toggle a:before {
transform: rotate(-90deg);
opacity: 1;
z-index: 2;
}
.accordion-toggle.active-tab {
background: yellowgreen;
transition: all 0.3s ease;
}
.accordion-toggle a.active:before {
transform: rotate(0deg);
background: #fff !important;
}
.accordion-toggle a.active:after {
transform: rotate(180deg);
background: #fff !important;
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu-container">
<div id="menu-wrapper">
<div id="hamburger-menu"><span></span><span></span><span></span></div>
<!-- hamburger-menu -->
</div>
<!-- menu-wrapper -->
<ul class="menu-list accordion">
<li id="nav1" class="toggle accordion-toggle">
<span class="icon-plus"></span>
<a class="menu-link" href="#">Menu1</a>
</li>
<!-- accordion-toggle -->
<ul class="menu-submenu accordion-content">
<li><a class="head" href="#">Submenu1</a></li>
<li><a class="head" href="#">Submenu2</a></li>
<li><a class="head" href="#">Submenu3</a></li>
</ul>
<!-- menu-submenu accordon-content-->
<li id="nav2" class="toggle accordion-toggle">
<span class="icon-plus"></span>
<a class="menu-link" href="#">Menu2</a>
</li>
<!-- accordion-toggle -->
<ul class="menu-submenu accordion-content">
<li><a class="head" href="#">Submenu1</a></li>
<li><a class="head" href="#">Submenu2</a></li>
</ul>
<!-- menu-submenu accordon-content-->
<li id="nav3" class="toggle accordion-toggle">
<span class="icon-plus"></span>
<a class="menu-link" href="#">Menu3</a>
</li>
<!-- accordion-toggle -->
<ul class="menu-submenu accordion-content">
<li><a class="head" href="#">Submenu1</a></li>
<li><a class="head" href="#">Submenu2</a></li>
<li><a class="head" href="#">Submenu3</a></li>
<li><a class="head" href="#">Submenu4</a></li>
</ul>
<!-- menu-submenu accordon-content-->
</ul>
<!-- menu-list accordion-->
</div>
<!-- menu-container -->
html:
<div id="menu" class="menu">
<ul class="headlines">
<li id="item1" onclick="checklist(this)">
<button onclick="myFunction()">g</button>
</li>
<li id="item2">
<button onclick="myFunction2()">a </button>
</li>
<li id="item3">b </li>
<li id="item4">c </li>
<li id="item5">d </li>
<li id="item6">e </li>
<li id="item7">f </li>
</ul>
</div>
CSS:
lu, li {
list-style-type: none;
font-size: 1.5em;
height: 40px;
width: 150px;
text-align: right;
border-style: none;
}
.menu {
width: 150px;
height: 350px;
}
.menu li {
position: relative;
top: 150px;
bottom: 0;
left: 725px;
right: 0;
margin: auto;
border-style: none;
}
.permahover li {
opacity: 1;
left: 10%;
}
.headlines li {
font-size: 1.5em;
color: #000000;
transition: all 0.5s;
cursor: pointer;
}
.headlines:hover li {
/* PARENT HOVER */
opacity: 0.4;
cursor: pointer;
/* Dim all */
}
.headlines li:hover {
/* SINGLE HOVER */
opacity: 1;
/* Max one */
color: #000000;
cursor: pointer;
}
In the current code when the user hover over an element, the other elements in the menu will reduce in opacity. How can i as well do the same procedure after clicking an element.. By clicking an element it'll keep its opacity however the unclicked elements will reduce in opacity, thus highlighting the selected element.
You will need javascript for this*. For example:
var $li = $('.headlines li').click(function() {
var state = !$(this).hasClass('active');
$(this).parent().toggleClass('active', state);
$li.removeClass('active');
$(this).toggleClass('active', state);
});
ul, li {
list-style-type: none;
font-size: 1.5em;
height: 40px;
width: 150px;
text-align: right;
border-style: none;
}
.menu {
width:150px;
height: 350px;
}
.menu li {
position: relative;
right: 0;
margin: auto;
border-style:none;
}
.permahover li {
opacity: 1;
left: 10%;
}
.headlines li {
font-size:1.5em;
color:#000000;
transition: all 0.5s;
cursor: pointer;
}
.headlines:hover li,
.headlines.active li {
opacity:0.4;
cursor: pointer;
}
.headlines li:hover,
.headlines li.active {
opacity: 1;
color:#000000;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu" class="menu">
<ul class="headlines">
<li id="item1" onclick="checklist(this)">
<button onclick="myFunction()">g</button>
</li>
<li id="item2">
<button onclick="myFunction2()">a</button>
</li>
<li id="item3">b</li>
<li id="item4">c</li>
<li id="item5">d</li>
</ul>
</div>
* technically it's possible to do it with pure CSS, but the HTML structure will become complex and not that semantic.
I was wondering if there was a way to add a scroll to the nav bar when the user has a zoomed in browser.
Currently, I have my nav bar set to:
position: fixed;
left: 0;
top: 0;
Along with a javascript code that makes it stick to the side when the user scrolls on the page.
However, say the user has a browser that is zoomed in 150% or more, half of the nav bar gets cut off and the user is not able to see the other options in the nav bar. Is there a way to add a scroll when the user has a zoomed in browser?
Here is my code,
HTML:
<header>
<div class="logo">
<a href="index.html">
<img src="img/logo.png"/>
</a>
</div><!-- end logo -->
<div id="menu_icon"></div>
<nav>
<ul>
<div class="transition">
<div class="sideBar">
<li>About</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Resume</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Skills</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Portfolio</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Map Gallery</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Thesis</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Contact</li>
</div>
</div>
</ul>
</nav><!--end sidebar-->
<div class="footer clearfix">
<ul class="social clearfix">
<li><img src="img/email.png"></li>
<li><img src="img/linkedin.png"></li>
<li><img src="img/twitter.png"></li>
<li><img src="img/facebook.png"></li>
</ul><!-- end social -->
<div class="rights">
<p>Copyright © MD</p>
</div><!-- end rights -->
</div ><!-- end footer -->
</header><!-- end header -->
CSS:
/* Header */
#media (min-width:1100px) {
header {
display: block;
position: fixed;
left: 0;
top: 0;
width: 260px;
min-height: 100%;
padding: 0 0 0 50px;
background: #FFFFFF;
float: left;
overflow: hidden;
z-index: 9999;
}
header .logo {
margin-top: 50px;
margin-left: -50px;
}
header nav ul {
display: block;
overflow: hidden;
margin-top: 35px;
margin-left: -15px;
list-style: none;
}
header nav ul li {
display: block;
margin-bottom: 30px;
margin-top: 50px;
}
header nav ul li a {
color: #000000;
font-family: "raleway-regular", arial;
font-size: 20px;
text-decoration: none;
letter-spacing: 2px;
}
header nav ul li a:hover {
color: #8AE6B8;
}
header nav ul li a:active {
color: #CC99FF;
}
.transition {
width:50%;
height: 30px;
position: relative;
transition: 0.5s;
}
.transition:hover {
width:100%;
height: 30px;
position: relative;
transition: 0.5s;
}
.sideBar {
width:75%;
height: 100%;
position: relative;
padding:0px;
margin-left:20%;
}
header .footer {
margin-top: 30%;
}
header ul.social {
position: relative;
list-style: none;
margin-bottom: 5px;
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
-webkit-transition: all .7s ease; /* Transition for Webkit browsers */
}
header ul.social li {
display: block;
float: left;
position: relative;
margin: 0 15px 15px 4px;
}
header ul.social li a {
display: block;
width: 30px;
height: 30px;
background-position: 0 0;
}
header .rights p {
color: #000000;
font-family: "raleway-regular", arial;
font-size: 11px;
letter-spacing: 2px;
line-height: 18px;
}
header .rights a {
font-family: "raleway-bold", arial;
font-weight: bold;
text-decoration: none;
}
Here is the jsfiddle:
https://jsfiddle.net/n2zb3pnz/
Even on the js fiddle it doesn't show the full nav bar because it is too zoomed in.
Fiddle: https://jsfiddle.net/n2zb3pnz/5/
header {
overflow: auto;
bottom:0;
}
A few issues here..
The <header> html tag is normally used as a container element for "navigational aids" for some containing element (in your case <body>). From the docs:
The HTML Element represents a group of introductory or
navigational aids. It may contain some heading elements but also other
elements like a logo, wrapped section's header, a search form, and so
on.
.. So, it's not semantically incorrect, but think of it's typically usage as being the top portion of a "frame" or box on your page (not the sidebar nav)
Your navbar overflow property is set to hidden - which prevents the scrolling that you are looking for. It also has no parent element aside from the doc body, so unless you want the scrolling on the navbar itself, you'll need to add a parent with overflow: auto;.
Example:
html, body{
height: 1000px;
width: 1000px;
}
.content{
height: 100%;
width: 100%;
overflow: auto;
background-color: pink;
}
.header {
display: block;
position: fixed;
left: 0;
top: 0;
width: 260px;
min-height: 100%;
padding: 0 0 0 50px;
background: #FFFFFF;
float: left;
overflow: hidden;
z-index: 9999;
}
.header .logo {
margin-top: 50px;
margin-left: -50px;
}
.header nav ul {
display: block;
overflow: hidden;
margin-top: 35px;
margin-left: -15px;
list-style: none;
}
.header nav ul li {
display: block;
margin-bottom: 30px;
margin-top: 50px;
}
.header nav ul li a {
color: #000000;
font-family:"raleway-regular", arial;
font-size: 20px;
text-decoration: none;
letter-spacing: 2px;
}
.header nav ul li a:hover {
color: #8AE6B8;
}
.header nav ul li a:active {
color: #CC99FF;
}
.transition {
width:50%;
height: 30px;
position: relative;
transition: 0.5s;
}
.transition:hover {
width:100%;
height: 30px;
position: relative;
transition: 0.5s;
}
.sideBar {
width:75%;
height: 100%;
position: relative;
padding:0px;
margin-left:20%;
}
.header .footer {
margin-top: 30%;
}
.header ul.social {
position: relative;
list-style: none;
margin-bottom: 5px;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
/* For Webkit browsers */
filter: gray;
/* For IE 6 - 9 */
-webkit-transition: all .7s ease;
/* Transition for Webkit browsers */
}
.header ul.social li {
display: block;
float: left;
position: relative;
margin: 0 15px 15px 4px;
}
.header ul.social li a {
display: block;
width: 30px;
height: 30px;
background-position: 0 0;
}
.header .rights p {
color: #000000;
font-family:"raleway-regular", arial;
font-size: 11px;
letter-spacing: 2px;
line-height: 18px;
}
.header .rights a {
font-family:"raleway-bold", arial;
font-weight: bold;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="header">
<div class="logo"> <a href="index.html">
<img src="img/logo.png"/>
</a>
</div>
<!-- end logo -->
<div id="menu_icon"></div>
<nav>
<ul>
<div class="transition">
<div class="sideBar">
<li>About
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Resume
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Skills
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Portfolio
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Map Gallery
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Thesis
</li>
</div>
</div>
<div class="transition">
<div class="sideBar">
<li>Contact
</li>
</div>
</div>
</ul>
</nav>
<!--end sidebar-->
<div class="footer clearfix">
<ul class="social clearfix">
<li><img src="img/email.png">
</li>
<li><img src="img/linkedin.png">
</li>
<li><img src="img/twitter.png">
</li>
<li><img src="img/facebook.png">
</li>
</ul>
<!-- end social -->
<div class="rights">
<p>Copyright © MD</p>
</div>
<!-- end rights -->
</div>
<!-- end footer -->
</div>
<!-- end header -->
</div>