I have a navigation bar with the section "Contracts" and I was wondering if it were possible, and how would I go about adding an additional navigation bar to expand underneath when this button is tagged, (For example, on the Apple Store site, when you click a product, this adds another bar)
I can provide my entire CSS style sheet if needed! I think this will require JavaScript but I'm trying to keep it as pure CSS for now!
All help is greatly appreciated!
HTML Code: This is the Navigation HTML
<header>
<div class="title">
<img src="img/logo2.png"/>
</div>
<div class="navbar">
<ul>
<li style="float: left">Home</li>
<li>Contracts</li>
<li>About Us</li>
<li>Other</li>
<li> Release Notes</li>
<li> <a target="_blank" href="http://www.phpartnership.com">Pinnacle Health Partnership</a></li>
</ul>
</div>
</header>
Creates this
CSS Code: My entire stylesheet
body {
background-color: #fff;
margin: 0;
font-family: Arial;
color: #333;
}
header {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar {
display: block;
text-align: center;
}
.navbar ul {
list-style-type: none;
padding: 0;
margin: 0;
overflow: hidden;
}
.navbar li {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.navbar li:before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
right: 50%;
bottom: 0;
background: white;
height: 4px;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.navbar li:hover:before, navbar li:focus:before, .navbar li:active:before {
left: 0;
right: 0;
}
.navbar li a {
padding: 25px;
display: block;
height: 100%;
color: white;
text-decoration: none;
}
.title {
height: 80px;
padding: 2px;
background-color: #fff;
}
.container {
margin-top: 150px;
padding-top: 50px;
}
.home {
margin-top: 10px;
text-align: center;
padding: 40px !important;
}
.wrap {
width: 100%;
margin: 0 auto;
}
.left_col {
float: left;
width: 50%;
}
.right_col {
float: right;
width: 50%;
}
.right_col img {
width: 80%;
margin-top: 50px;
border: 2px solid black;
border-radius: 5px;
}
.left_col img {
width: 80%;
margin-top: 50px;
border: 2px solid black;
border-radius: 5px;
}
This is the JavaScript I tried to use to hide and show the div on click
<script>
$(index.php).ready(function(){
``$("#contract").click(function(){
$("<div class="contracts">").toggle();
});
});
</script>
guess you want smth like this : jsfiddle
first add jQuery to your local environment
use this <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
add it in the head section of your html. for more info check how to install jQuery
added html inside the .navbar
<ul class="aditional">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
added css :
.aditional {
position:absolute;
top:100%;
width:100%;
background:#000;
display:none;
}
.aditional li {
color:#fff;
}
added js :
$('.navbar ul li:nth-child(2) a').click(function() {
$(".aditional").slideToggle()
});
OR if you want a more responsive solution
check this :jsfiddle with target
use data-target on the li a like this
<li>Contracts</li>
<li>About Us</li>
added html :
<ul class="aditional contracts">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
<ul class="aditional aboutus">
<li>about</li>
<li>about</li>
<li>about</li>
<li>about</li>
</ul>
jq added :
$('.navbar ul li a').click(function() {
$(".aditional").slideUp()
var target = '.' + $(this).data('target');
$(target).slideDown();
})
OR u can target the href of the li a. simply add this
<li>Contracts</li>
<li>About Us</li>
------
<ul class="aditional" id ="contract">
....
<ul class="aditional" id ="about">
....
and js :
$('.navbar ul li a').click(function() {
$(".aditional").slideUp()
var target = $(this).attr('href');
$(target).slideDown();
})
see here jsfiddle
one of these solutions should work for you . let me know
Related
so I am trying to create a multilevel navigation for a mobile device and I am running into some issues. I am still learning javascript so please bare with me. Here is a link to the codepen:
https://codepen.io/maciekmat/pen/yLepYKq
So when you press the menu in the top right, a menu will open down. Then I would like to be able to go into sub categories. For example click Test Open, .active class will be assigned, and another menu slides in. Now I would like to have a go back button that essentially removes the .active class.
However what I think is happening, the event listener listens to the whole parent, and anywhere you click inside the subnavigation, it registers it as a click, and runs the .active class. When I click to go back, its like .active is removed and applied back instantly. Any help please?
I tried doing the event.currentEvent !== event.target if statement but had no luck
const nav = document.getElementById('menuIcon')
const dropdown = document.getElementById('menuDropdown')
nav.addEventListener('click', function() {
dropdown.classList.toggle('nav-is-toggled')
});
const grabNavLinks = document.querySelectorAll('.sub-nav-link');
const grabBackLinks = document.querySelectorAll('.nav-link.back');
const subNavLinks = Array.from(grabNavLinks);
const backLinks = Array.from(grabBackLinks);
for (let i = 0; i < subNavLinks.length; i++) {
subNavLinks[i].addEventListener("click", function() {
this.querySelector('.sub-nav').classList.add('active');
});
}
for (let i = 0; i < backLinks.length; i++) {
backLinks[i].addEventListener("click", function() {
document.querySelector('.sub-nav').classList.remove('active');
});
}
#import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400;600;700&display=swap");
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: "Open sans", sans-serif;
background: #F9F9F9;
box-sizing: border-box;
}
a, p, h1, h2, h3 {
margin: 0;
padding: 0;
text-decoration: none;
}
ul, li {
padding: 0;
margin: 0;
}
header {
background: white;
padding: 24px 30px;
display: flex;
flex-direction: column;
z-index: 10;
position: relative;
}
.top-nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.top-nav .logo {
background: url("images/tcb-logo-brand.svg") no-repeat;
width: 150px;
height: 50px;
background-size: contain;
background-position: center;
}
.top-nav .navigation {
display: flex;
justify-content: space-between;
width: 132px;
height: 26px;
}
.top-nav .navigation .nav-item {
width: 23px;
height: 26px;
margin-left: 10px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.top-nav .navigation .nav-item.menu {
background-image: url("images/menu-icon.svg");
}
.top-nav .navigation .nav-item.notification {
background-image: url("images/bell-icon.svg");
}
.top-nav .navigation .nav-item.my-account {
background-image: url("images/acc-icon.svg");
}
.search {
margin-top: 16px;
}
.search input[type=search] {
outline: none;
border: none;
background: #F6F6F6;
width: 100%;
height: 50px;
font-size: 16px;
padding: 10px 0 10px 20px;
background-image: url("images/search-icon.svg");
background-repeat: no-repeat;
background-position: right 15px top 50%;
}
.search input[type=search]::placeholder {
color: #B7B7B7;
}
span.nav-title {
display: none;
}
nav.main-nav {
width: 100%;
background: #F6F6F6;
transform: translateY(-100%);
z-index: 0;
position: relative;
transition: all 0.3s ease-in-out;
position: absolute;
padding-bottom: 50px;
overflow: hidden;
}
nav.main-nav ul {
padding-top: 2px;
position: relative;
}
nav.main-nav li {
list-style: none;
}
nav.main-nav a {
color: #6D6D6D;
font-size: 16px;
width: 100%;
height: 100%;
display: block;
padding: 18px 30px;
border-bottom: 1px solid #E9E9E9;
}
nav.main-nav li.nav-link.arrow {
background: url("images/right-arrow.svg") no-repeat;
background-position: right 30px top 50%;
}
nav.main-nav ul.sub-nav {
background: #cecece;
width: 100%;
display: flex;
flex-direction: column;
transform: translateX(100%);
overflow: hidden;
visibility: hidden;
opacity: 0;
position: absolute;
top: 0;
left: 0;
transition: transform 0.2s ease;
}
.sub-nav-link > .sub-nav.active {
transform: translateX(0);
visibility: visible;
opacity: 1;
}
nav.nav-is-toggled {
position: static;
opacity: 1;
transform: translateY(0);
transition: all 0.3s ease-in-out;
}
<header>
<div class="top-nav">
<div class="logo"></div>
<div class="navigation">
<div id="menuIcon" class="nav-item menu">test</div>
<div class="nav-item notification"></div>
<div class="nav-item my-account"><span class="nav-title">My Account</span></div>
</div>
</div>
<div class="search">
<input type="search" name="search" id="search" placeholder="Search by store...">
</div>
</header>
<nav id="menuDropdown" class="main-nav">
<ul class="main-nav-ul">
<li class="nav-link">Test</li>
<li class="nav-link arrow sub-nav-link">Test Open
<ul class="sub-nav">
<li class="nav-link back">Go Back</li>
<li class="nav-link">Test</li>
<li class="nav-link">Test</li>
<li class="nav-link">Test</li>
</ul>
</li>
<li class="nav-link">Test</li>
<li class="nav-link">Test</li>
<li class="nav-link arrow sub-nav-link">Test Open
<ul class="sub-nav">
<li class="nav-link back">Go Back</li>
<li class="nav-link">Test</li>
<li class="nav-link">Test</li>
</ul>
</li>
<li class="nav-link">Test</li>
</ul>
</nav>
<script src="navigation.js"></script>
Go read on event bubbling and how it bubbles through the DOM tree. However due to the way it passes from parent to child (that's it bubbles down the tree) you should call event.stopPropagation(); So that the previous event doesnt bubble into the backLinks event listener.
This is what you should do
for (let i = 0; i < backLinks.length; i++) {
backLinks[i].addEventListener("click", function(event) {
event.stopPropagation();
document.querySelector('.sub-nav').classList.remove('active');
});
}
I have created custome side bar for my site, All is fine but I have menu's and submenu's when user hovers on the menu list if it has the submenu then it will show
thats fine. The problem is submenu not overlapping the scrollbar and side parent/sibling element. I have added images here for more clarification.
.menu {
height: 100%;
width:16.16% !important;
position: fixed;
z-index: 1000;
left: 0;
overflow-x: hidden;
overflow-y: auto;
padding-bottom: 10%;
background-color: white;
border-right:2px solid #f1f1f1;
}
.menu ul {
list-style-type: none;
margin-left:-40px;
margin: 0;
padding: 0;
}
.menu ul > div{
font-weight:bold;
font-size:18px;
margin-top: 10px;
margin-bottom:0px;
border-bottom:1px solid #f1f1f1;
cursor: pointer;
}
.menu ul li {
padding: 5px;
position: relative;
vertical-align: middle;
height:auto;
width: 100%;
border-bottom:1px solid #f1f1f1;
font-size: 16px;
padding-left:10px;
}
.menu ul ul{
min-height: 30px;
transition: all 0.3s;
opacity: 0;
position: absolute;
visibility: hidden;
left: 80%;
top:100%;
border: 1px solid #f1f1f1;
z-index: -1000000;
}
.menu ul ul > li{
width: 250px;
height: auto;
background-color: white;
border-bottom: 1px solid black;
}
.menu > ul > li > div > i{
float: right;
vertical-align: middle;
line-height: 1.5;
}
.menu ul li:hover{
background-color:#cccccc;
cursor:pointer;
opacity: 1;
}
.menu ul li:hover > ul{
opacity: 2;
visibility: visible;
z-index: 100000000;
//left: 100%;
}
<!-----Header will come here ----->
<div class="container-fluid row">
<div class="col-md-12 text-center" id="topHeader">
<span>Circulation</span>
</div>
<div class="col-md-2">
<div class="menu"><i id="hideSideBar" class="fa fa-close"></i>
<ul class="menuList"><div class="listName">Reports</div>
<li class="path" data-screen="CustomizedCirculationReportsCt/index" id="li_CustomizedReport">Customized Report</li>
<li class="path" data-screen="CustomizedCirculationStatisticsCt/index" id="li_CustomizedReport">Customized Statistics</li>
<li class="hasChildUl" id=""><div class="listName">UserWise Report<i class="fa fa-caret-right"></i></div>
<ul class="menuList">
<li class="path" data-screen="UserWiseCirculationController/AllUserCirculation" id="userWiseCrReport">Circulation Report</li>
<li class="path" data-screen="UserWiseCirculationController/userWiseFineCollection" id="userWiseFineCrReport">Fine Collection Report</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="col-md-10 firstChild">
<div class="row">
<p>Web pages goes here</p>
</div>
</div>
<!-----Footer will come here ----->
Image :
Updated Answer
I found a nice article on Popping out of hidden overflows that seems to address the issue.
The problem is due to non-obvious behaviour of the combined overflow properties and nested view hierarchies from position: absolute/relative/fixed.
You need a non-overflowing parent element that acts as the positioning anchor for the sub-menus. I tried to strip down your example to the neccessary parts:
.menu {
position: fixed;
}
ul {
list-style-type: none;
height: 100px;
overflow-x: hidden;
overflow-y: auto;
border: 1px dashed #ccc;
}
.menu ul li {
/*
this seems to be the problematic property
position: relative;
*/
}
.menu ul ul {
transition: all 0.3s;
opacity: 0;
position: absolute;
left: 80%;
background: red;
}
.menu ul li:hover {
background-color: #cccccc;
}
.menu ul li:hover > ul {
opacity: 1;
z-index: 10;
}
<div class="menu">
<ul>
<li>Customized Report
<ul>
<li>Circulation Report</li>
<li>Fine Collection Report</li>
</ul></li>
<li>Customized Statistics</li>
<li>Customized Statistics</li>
<li>Customized Statistics</li>
<li>Customized Statistics</li>
<li>Customized Statistics</li>
<li>Customized Statistics</li>
<li>Customized Statistics</li>
<li>UserWise Report
<ul>
<li>Circulation Report</li>
<li>Fine Collection Report</li>
</ul>
</li>
</ul>
</div>
But there is a problem with the positioning of the submenu which can be addressed with javascript. Check the article for a better explanation.
Personally I always try to avoid nested scrolling whereever I can. I suggest that you evaluate the possibility of scrolling the whole page when the menu grows. Also, I'd not rely on submenus that are shown by :hover or mouseover because they are not available on touch-controlled browsers.
Original Answer
In the CSS, the menu has set its horizontal overflow to hidden. The Popup-Menu will show up when you remove the overflow properties:
.menu {
height: 100%;
width:16.16% !important;
position: fixed;
z-index: 1000;
left: 0;
/*
Remove this props
overflow-x: hidden;
overflow-y: auto;
*/
padding-bottom: 10%;
background-color: white;
border-right:2px solid #f1f1f1;
}
It works when you remove those lines from your example code.
I am using Jquery to show project categories and filter the projects by which category is selected.
View the code pen here: https://codepen.io/saintasia/pen/dzqZov
HTML:
<body>
<div class="container">
<nav>
<ul>
<li class="current">All projects</li>
<li>Front-end</li>
<li>Back-end</li>
<li>Apps</li>
<li>Design</li>
<li>Testing Testing Testing</li>
</ul>
</nav>
<div id="projects">
<h1 class="heading">All Projects</h1>
<ul id="gallery">
<li class="design"><img src="https://source.unsplash.com/jjtdL443L4w/700x700"></li>
<li class="apps"><img src="https://source.unsplash.com/y1yQQmozTBw/700x700"></li>
<li class="back-end"><img src="https://source.unsplash.com/b18TRXc8UPQ/700x700"></li>
<li class="apps design"><img src="https://source.unsplash.com/klRB1BB9pV8/700x700"></li>
<li class="front-end testing-testing-testing back-end"><img src="https://source.unsplash.com/y1yQQmozTBw/700x700"></li>
<li class="front-end design"><img src="https://source.unsplash.com/1vwwZ-BmmrE/700x700"></li>
<li class="apps"><img src="https://source.unsplash.com/WLOCr03nGr0/700x700"></li>
<li class="back-end"><img src="https://source.unsplash.com/iOykDIkZLQw/700x700"></li>
</ul>
</nav>
</div>
<!-- modal gallery -->
<div class="gallery">
<a class="close" href="#">
<i>
<span class="bar"></span>
<span class="bar"></span>
</i>
</a>
<img src="">
</div>
</div>
</body>
CSS:
* {
margin: 0;
padding: 0;
}
body {
color: #333;
font-size: 13px;
background: #f4f4f4;
font-family: sans-serif;
overflow:auto;
}
.container {
width: 90%;
max-width: 960px;
margin: 30px auto;
position: relative;
text-align: center;
}
h1 {
margin-bottom: 20px;
text-transform: uppercase;
color: #F39CC3;
}
nav {
display: block;
width: 100%;
}
ul {
list-style: none;
margin-bottom: 20px;
}
nav > ul > li {
display: inline-block;
}
nav > ul > li > a {
text-transform: uppercase;
padding: 4px 10px;
margin-right: 2px;
margin-left: 2px;
text-decoration: none;
color: #27A4DD;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 25px;
border: 1px solid #27A4DD;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
.hidden {
display: none;
}
nav > ul > li > a:hover, .current a {
color: #fff;
background-color: #27A4DD;
}
#projects > ul > li {
display: inline-block;
float: left;
margin-right: 10px;
margin-bottom: 5px;
width: 23%;
height: auto;
cursor: pointer;
border-radius: 5px;
/* Padding stays within the width */
box-sizing: border-box;
position: relative;
opacity: 0.7;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
#projects > ul > li:hover {
opacity: 1;
}
img {
max-width: 100%;
border-radius: 5px;
}
.gallery {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
padding: 40px 10px;
display: none;
box-sizing: border-box;
}
.gallery > img {
max-height: 100%;
width: auto;
}
.close i {
position: fixed;
top: 10px;
right: 10px;
height: 30px;
width: 30px;
}
.bar {
display: block;
position: absolute;
top: 13px;
float: left;
width: 30px;
border-bottom: 4px solid #fff;
transform: rotate(45deg);
}
.bar:first-child {
transform: rotate(-45deg);
}
#media (max-width: 768px){
#projects > ul > li {
width: 48%;
}
}
#media (max-width: 568px) {
#projects > ul > li {
width: 100%;
}
}
JS:
$(document).ready(function(){
// filter
$('nav a').on('click', function(event){
event.preventDefault();
// current class
$('nav li.current').removeClass('current');
$(this).parent().addClass('current');
// set new heading
$('h1.heading').text($(this).text());
// filter link text
var category = $(this).text().toLowerCase().replace(' ', '-');
// remove hidden class if "all" is selected
if(category == 'all-projects'){
$('ul#gallery li:hidden').fadeIn('slow').removeClass('hidden');
} else {
$('ul#gallery li').each(function(){
if(!$(this).hasClass(category)){
$(this).hide().addClass('hidden');
} else {
$(this).fadeIn('slow').removeClass('hidden');
}
});
}
return false;
});
// lightbox
$('ul#gallery a').on('click', function(event){
event.preventDefault();
var link = $(this).find('img').attr('src');
$('.gallery img').attr('src', '');
$('.gallery img').attr('src', link);
$('.gallery').fadeIn('slow');
});
// close lightbox
$('.gallery').on('click', function(event){
event.preventDefault();
$('.gallery').fadeOut('slow');
});
});
The problem I am having is that if a category is more than 2 words, it doesn't show the projects with that category. You'll see in the code pen that there is a category called "Testing Testing Testing" and one of the projects has that category assigned to it. But, when you click the Testing Testing Testing category, no projects show up. All of the other categories work however, because they are all only 2 words long.
Any help is greatly appreciated!
Your code break because the .replace(' ', '-') code just replace the first space
if you want to change all space with '-', you should change this code
var category = $(this).text().toLowerCase().replace(' ', '-');
to this
var category = $(this).text().toLowerCase().split(' ').join('-');
I'm doing a custom drop-down navigation but when it toggles the logo, in this codepen represented by the blue div, goes to the bottom of the navigation. I've been trying to work around this for a while now and would appreciate any help.
Here is my code:
HTML
<div class='container-fluid nav'>
<div class='container'>
<div class = 'nav__btn--toggle u-inlineBlock u-center' onclick="animateNavbarToggle(this); toggleDropdown();">
<div class = 'nav__btn bar1'></div>
<div class = 'nav__btn bar2'></div>
<div class = 'nav__btn bar3'></div>
</div>
<ul class = "nav__dropdown">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<div class='nav__brand u-inlineBlock'>
logo
</div>
</div>
</div>
CSS
.nav__dropdown {
padding-left: 0;
margin-top: 75px;
list-style: none;
text-align: center;
box-sizing: border-box;
display: none;
}
.nav__dropdown li {
font-size: 20px;
padding: 25px;
width: 40%;
background: white;
border-bottom: 1px solid black;
}
.nav__dropdown li:last-child{
border-bottom: none;
}
.nav__dropdown li:hover{
background: black;
color: seashell
}
.u-inlineBlock {
display: inline-block;
}
JS
function toggleDropdown(x) {
$('.nav__dropdown').slideToggle(500);
}
After this, I'll try to add a sub menu on the right side, so if you could point me in the right path for that as well that would be great
(Notice that this is just a bonus for me, I don't care if you don't help me with that so don't downvote for being too broad or something like that. I also saw some similar questions but they did not help)
Thanks in advance!
Just move the logo before the ul, and remove the margin-top from the ul. And if you want the toggle button and submenu to be flush with the white header, remove .nav { height: 75px; }
function animateNavbarToggle(x) {
x.classList.toggle("toggled");
}
function toggleDropdown(x) {
$('.nav__dropdown').slideToggle(500);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
body {
background-color: pink;
height: 2000px;
}
/*------------------------------------*\
#NAVIGATION
\*------------------------------------*/
.nav {
background-color: white;
height: 75px;
}
.nav__brand {
height: 68px;
width: 227px;
background-color: lightblue;
text-align: center;
}
/**
* Navigation dropdown button
*/
.nav__btn {
width: 22PX;
height: 3px;
background-color: black;
margin: 4px 0;
}
.nav__btn--toggle {
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 22PX;
height: 3px;
background-color: coral;
margin: 4px 0;
transition: 0.4s;
}
/* Rotate first bar */
.toggled .bar1 {
-webkit-transform: rotate(-45deg) translate(-5px, 5px);
transform: rotate(-45deg) translate(-5px, 5px);
}
/* Fade out the second bar */
.toggled .bar2 {
opacity: 0;
}
/* Rotate last bar */
.toggled .bar3 {
-webkit-transform: rotate(45deg) translate(-4px, -4px);
transform: rotate(45deg) translate(-4px, -6px);
}
/**
* Navigation Dropdown
*/
.nav__dropdown {
padding-left: 0;
list-style: none;
text-align: center;
box-sizing: border-box;
display: none;
}
.nav__dropdown li {
font-size: 20px;
padding: 25px;
width: 40%;
background: white;
border-bottom: 1px solid black;
}
.nav__dropdown li:last-child {
border-bottom: none;
}
.nav__dropdown li:hover {
background: black;
color: seashell;
}
/*------------------------------------*\
#UTILITIES
\*------------------------------------*/
.u-inlineBlock {
display: inline-block;
}
.u-center {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
<div class='container-fluid nav'>
<div class='container'>
<div class='nav__btn--toggle u-inlineBlock u-center' onclick="animateNavbarToggle(this); toggleDropdown();">
<div class='nav__btn bar1'></div>
<div class='nav__btn bar2'></div>
<div class='nav__btn bar3'></div>
</div>
<div class='nav__brand u-inlineBlock'>
logo
</div>
<ul class="nav__dropdown">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
try adding position: fixed to your nav__dropdown CSS
.nav__dropdown {
padding-left: 0;
margin-top: 75px;
list-style: none;
text-align: center;
box-sizing: border-box;
display: none;
position: fixed;
}
Position fixed essentially removes the content from the flow of the document window, which makes it not cause any interactions with your logo.
More on position fixed here
When I click a button on the sidebar, and if the current tab is the second tab the navigation tab is going to display the first tab as the second tab lost the focus. How can I keep the second tab in display while clicking a button on the sidebar?
the code is in jsfiddle
https://jsfiddle.net/98okrj0f/9/
The AngularJs scripts works at my local. Can anyone also tell me how to make it work in jsfiddle?
HTML Code here
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Nav</title>
<link href="nav.css" rel="stylesheet"/>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<!-- -->
<body ng-app="App" >
<nav>
<ul> <span>My App</span>
<li class="sub">
Version
<ul>
<li class="sub">
V2
<ul ng-controller="V2Ctrl">
<li ng-repeat = "v2 in V2s"><a href="#">{{v2}}</li>
</ul>
</li>
<li class="sub">
V3
<ul ng-controller="V3Ctrl">
<li ng-repeat = "v3 in V3s"><a href="#">{{v3}}</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<aside class="side" align="left">
<table onclick="reply_click(event)" ng-app="App" ng-controller="TableCtrl" >
<tr ng-repeat = "table in tables">
<td><button id = "{{table}}" width = "70">{{table}}</button></td>
</tr>
</table>
</aside>
<article class="tabs">
<section id="erd">
<h2>ERD</h2>
<p>This content appears on tab ERD.</p>
</section>
<section id="col">
<h2>Columns</h2>
<p>This content appears on tab Columns.</p>
</section>
<section id="home">
<h2>Home</h2>
<p>This content appears on tab Home. lfkdgl;k lkfd;lkg ';lkfg ;lkg 'df;lk ;lk ';lk ';fdlkg ';fdlkg';dflk;ldfkg';lkdlfkdfkglkdf lkjhlsdjhfljdfhlkjdh jh jhkjdhfkjsdhf skjdhf lk h dsfjlkjsdlkfj;dslkfj dskfj;kj sdfkj fkdj;lfkjsd;lkfj sdkfj ;slkj sdfj;lskjf skdj flksjdf ; sdfkj ;sdlkfj dskfj sdkjfhueuu suehu heu he u heu heh ueh ufhu fhe uueh ush uhsudh ue huhuhufheuheu u heiu h euh eh ue </p>
</section>
</article>
<footer align="bottom">
<span>"Copyright© 2016 </span></span>
</footer>
<script>
var app = angular.module('App', []);
app.controller('TableCtrl', function($scope) {
$scope.tables = ['category','supplier','customer','dept','empl','orders'];
});
app.controller('V2Ctrl', function($scope) {
$scope.V2s = ['2.10','2.11','2.12','2.13','2.14','2.15','2.16','2.17','2.18','2.19','2.20','2.21','2.22','2.23','2.24','2.25','2.26','2.27','2.28'];
});
app.controller('V3Ctrl', function($scope) {
$scope.V3s = [' ',' SP1',' SP2',' SP3',' SP4',' SP5',' SP6',' SP7',' SP8',' SP9',' SP10'];
});
</script>
</body>
</html>
CSS code here.
#logo{
position: absolute;
right:10px;
bottom: 10px;
}
body{
margin: 0;
padding: 0;
font-size: 12px;
font-family: "Lucida Grande", "Helvetica Nueue", Arial, sans-serif;
}
nav {
background-color: #333;
border: 1px solid #333;
color: #fff;
display: block;
margin: 0;
padding: 0;
z-index: 9999;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
z-index: 9999;
text-align: center;
}
na ul span {
width: 300px
margin-top: 250%;;
}
nav ul li {
margin: 0;
display: inline-block;
list-style-type: none;
transition: all 0.2s;
}
nav > ul > li > a {
color: #aaa;
display: block;
line-height: 1em;
/*padding: 0.5em 2em;*/
padding: 0.2em 3em;
text-decoration: none;
}
nav li > ul{
display : none;
margin-top:1px;
background-color: #bbb;
}
nav li > ul li{
display: block;
}
nav li > ul li a {
color: #111;
display: block;
line-height: 1em;
padding: 0.2em 2em;
text-decoration: none;
}
nav li:hover {
background-color: #666;
}
nav li:hover > ul{
position:absolute;
display : block;
}
nav li > ul > li ul {
display: none;
background-color: #888;
}
nav li > ul > li:hover > ul {
position:absolute;
display : block;
margin-left:100%;
margin-top:-3em;
}
nav ul > li.sub{
background: url(ic_keyboard_arrow_down_white_18dp.png) right center no-repeat;
z-index: 5;
overflow: visible;
}
nav ul > li.sub li.sub{
background: url(ic_keyboard_arrow_right_white_18dp.png) right center no-repeat;
z-index: 5;
overflow: visible;
}
/*****************************************************************************/
aside {
display: block;
position: absolute;
width: 80px;
height: 550px;
padding-right: 0;
margin: 0;
overflow: auto;
background-color: lightblue
}
article {
/* position: relative; */
}
article.tabs
{
position: relative;
display: block;
width: 1100px;
height: 500px;
margin: 2em;
margin-left:80px;
background-color: green;
}
article.tabs section
{
position: absolute;
display: block;
left: 0;
width: 1100px;
height: 500px;
padding: 10px 20px;
background-color: #ddd;
border-radius: 5px;
box-shadow: 0 3px 3px rgba(0,0,0,0.1);
z-index: 0;
}
article.tabs section:first-child
{
z-index: 1;
}
article.tabs section h2
{
position: absolute;
font-size: 1em;
font-weight: normal;
width: 120px;
height: 1.5em;
top: -1.5em;
left: 10px;
padding: 0;
margin: 0;
color: #999;
background-color: #ddd;
border-radius: 5px 5px 0 0;
}
article.tabs section:nth-child(2) h2
{
left: 132px;
}
/*
article.tabs section:nth-child(3) h2
{
left: 254px;
}*/
article.tabs section h2 a
{
display: block;
width: 100%;
line-height: 1.5em;
text-align: center;
text-decoration: none;
color: inherit;
outline: 0 none;
}
article.tabs section:target,
article.tabs section:target h2
{
color: #333;
background-color: #fff;
z-index: 2;
}
article.tabs section,
article.tabs section h2
{
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
footer
{
color: #999;
text-align:center
background-color: #333;
width: 100%;
bottom: 0;
position: fixed;
}
the update jsfiddle.
https://jsfiddle.net/98okrj0f/13/
Since nobody answered you're question I will answer this question like I did the previous ones.
The problem was that you weren't closing you <a> tags with </a>. So the html added extra <a> tags with made the left bar also use a href which is used for your tabs. This way it overrided the open tab.
See the new JSfiddle: https://jsfiddle.net/98okrj0f/19/
Here's the code that was making the error's:
<li ng-repeat = "v2 in V2s">{{v2}}</li>
<li ng-repeat = "v3 in V3s">{{v3}}</li>