I'm new to JQuery and I was looking for slight guidance. I was building a page using tabbed content, but I'm running into slight problems. The animation I was using worked in the exact opposite way I had intended. So what am I trying to do? When the page launches the first tab is active and the content is displayed. When you click on another tab the content moves in from the left (it is hidden off the content). But for some reason, I can't seem to use a conditional to separate the behavior of the tabs. I had to tried to treat the tabs as if they were in an array so that it would avoid the first tab.Here is the piece that I'm working on.
jQuery(document).ready(function(){
jQuery('.tabs .tab-links a').on('click', function(e){
var currentAttrValue = jQuery(this).attr('href');
if($('li:gt(0)')){
$('.tabs ' + currentAttrValue).animate({opacity:1, paddingLeft:'30%'}, 400);
$('.tabs ' + currentAttrValue).fadeIn(400).siblings().hide();
}else if($('li:lt(1)')){
$('.tabs ' + currentAttrValue).fadeIn(400).siblings().hide();
}
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
.tab-content {
background-color: #e5e5e5;
color: #666;
min-height: 150px;
overflow: auto;
}
.tab-links{
float:left;
}
.tab-links:after {
display:block;
clear:both;
content:'';
}
.tab-links li {
list-style-type: none;
background-color: #303030;
text-transform: uppercase;
letter-spacing: 0.09em;
margin-left: -25%;
}
.tab-links li a {
color: #f2f2f2;
display: block;
text-decoration: none;
}
.tab-links a:hover {
background:#a7cce5;
text-decoration:none;
}
.tab-links li.active, .tab-links li.hover {
background-color: #e5e5e5;
}
.tab-links li.active a, .tab-links li a:hover {
color: #666;
}
#tab2, #tab3, #tab4 { display:none; }
.tab-content p {
margin: 20px;
text-indent: -40%;
}
.tab-content.active{
display: block;
text-indent: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
<ul class="tab-links">
<li class="active">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<p>sdaksjdalkjflksjfkjsaf</p>
</div>
<div id="tab2" class="tab">
<p>weiwoqoiehwqwhdjsakdnma</p>
</div>
<div id="tab3" class="tab">
<p>ryqwurioqwiijdipqjdqpdjo</p>
</div>
<div id="tab4" class="tab">
<p>asdlksjdksjdlaskjdkasjdlkaj</p>
</div>
</div>
</div>
Any and all help is appreciated, I can't seem to get past this part.
To animate the new tab content in from the left by animating the padding, you need to set the initial padding to 0 (or some other value less than 30%. And to animate the opacity you need to start the opacity at 0. I made a couple of slight modifications to your css, to show the tab 1 content by default and initialize the other tabs to their pre-animation state. There is no need to treat tab1 any differently from the other tabs.
jQuery(document).ready(function(){
jQuery('.tabs .tab-links a').on('click', function(e){
var currentAttrValue = jQuery(this).attr('href');
$('.tabs ' + currentAttrValue).show();
$('.tabs ' + currentAttrValue).animate({opacity:1, paddingLeft:'30%'}, 400);
$('.tabs ' + currentAttrValue).siblings().css({opacity:0, paddingLeft:'0%'}).hide();
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
});
.tab-content {
background-color: #e5e5e5;
color: #666;
min-height: 150px;
overflow: auto;
}
.tab-links{
float:left;
}
.tab-links:after {
display:block;
clear:both;
content:'';
}
.tab-links li {
list-style-type: none;
background-color: #303030;
text-transform: uppercase;
letter-spacing: 0.09em;
margin-left: -25%;
}
.tab-links li a {
color: #f2f2f2;
display: block;
text-decoration: none;
}
.tab-links a:hover {
background:#a7cce5;
text-decoration:none;
}
.tab-links li.active, .tab-links li.hover {
background-color: #e5e5e5;
}
.tab-links li.active a, .tab-links li a:hover {
color: #666;
}
#tab1 {padding-left: 30%;}
#tab2, #tab3, #tab4 {
display:none;
opacity: 0;
padding-left: 0%;
}
.tab-content p {
margin: 20px;
text-indent: -40%;
}
.tab-content.active{
display: block;
text-indent: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
<ul class="tab-links">
<li class="active">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<p>tab1 content</p>
</div>
<div id="tab2" class="tab">
<p>tab2 content</p>
</div>
<div id="tab3" class="tab">
<p>tab3 content</p>
</div>
<div id="tab4" class="tab">
<p>tab4 content</p>
</div>
</div>
</div>
Related
I want to create sort of tab menu. My problem is that before page is fully-loaded, tabbed content appears for a very short time (for few miliseconds or so) without CSS settings. After that, page is loading and then working correctly-tab content is appearing and disappearing just as I wanted. What can I do to avoid that?
$(function() {
$('.tabs-container').addClass('js');
$('.tabs').each(function() {
const $a = $(this).find('a');
$a.on('click', function(e) {
const $this = $(this);
const href = $this.attr('href');
const $target = $(href);
if ($target.length) {
e.preventDefault();
$this.siblings('a').removeClass('active');
$this.addClass('active');
$target.siblings('.tab-content').removeClass('active');
$target.addClass('active');
}
});
});
});
.tabs {
list-style-type: none;
margin: 5px 0 0 0;
padding: 0;
clear: both;
padding-bottom: 10px;
overflow: hidden;
}
.tabs a {
width: 20%;
display: inline-block;
height: 3em;
margin: 2px;
background: #eee;
font-size: 1em;
font-weight: bold;
line-height: 3em;
text-decoration: none;
color: #333;
text-align: center;
}
.tabs a.active {
background: #EC185D;
color: #fff;
}
.tabs-container.js .tab-content {
display: none;
padding: 1em;
font-size: 2em;
background: #eee;
border-radius: 2px;
}
.tabs-container.js .tab-content.active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="container">
<div class="tabs">
tab1
tab2
tab3
tab4
</div>
<div class="tabs-container">
<article id="tab1" class="tab-content active">
<div class="tab-text">
Content1
</div>
</article>
<article id="tab2" class="tab-content">
<div class="tab-text">
Content 2
</div>
</article>
<article id="tab3" class="tab-content">
<div class="tab-text">
Content 3
</div>
</article>
<article id="tab4" class="tab-content">
<div class="tab-text">
Content4
</div>
</article>
</div>
</div>
You can hide the content at initial load and show when the tabs are blinded,
below is updated code
$(function() {
$('.tabs-container').addClass('js');
$('.tabs').each(function() {
const $a = $(this).find('a');
$a.on('click', function(e) {
const $this = $(this);
const href = $this.attr('href');
const $target = $(href);
if ($target.length) {
e.preventDefault();
$this.siblings('a').removeClass('active');
$this.addClass('active');
$target.siblings('.tab-content').removeClass('active');
$target.addClass('active');
}
});
});
$('#container').show();
});
.tabs {
list-style-type: none;
margin: 5px 0 0 0;
padding: 0;
clear: both;
padding-bottom: 10px;
overflow: hidden;
}
.tabs a {
width: 20%;
display: inline-block;
height: 3em;
margin: 2px;
background: #eee;
font-size: 1em;
font-weight: bold;
line-height: 3em;
text-decoration: none;
color: #333;
text-align: center;
}
.tabs a.active {
background: #EC185D;
color: #fff;
}
.tabs-container.js .tab-content {
display: none;
padding: 1em;
font-size: 2em;
background: #eee;
border-radius: 2px;
}
.tabs-container.js .tab-content.active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="container" style="display:none">
<div class="tabs">
tab1
tab2
tab3
tab4
</div>
<div class="tabs-container">
<article id="tab1" class="tab-content active">
<div class="tab-text">
Content1
</div>
</article>
<article id="tab2" class="tab-content">
<div class="tab-text">
Content 2
</div>
</article>
<article id="tab3" class="tab-content">
<div class="tab-text">
Content 3
</div>
</article>
<article id="tab4" class="tab-content">
<div class="tab-text">
Content4
</div>
</article>
</div>
</div>
You could hide .tabs-container until your JS is initialized and executed. For instance, an easy way to do it is :
.tabs-container:not(.js) {
display: none;
}
So it starts off hidden, then, when your tabs are built with JS and it gets the js class, it becomes visible, so you don't see the init blinking.
$(function() {
$('.tabs-container').addClass('js');
$('.tabs').each(function() {
const $a = $(this).find('a');
$a.on('click', function(e) {
const $this = $(this);
const href = $this.attr('href');
const $target = $(href);
if ($target.length) {
e.preventDefault();
$this.siblings('a').removeClass('active');
$this.addClass('active');
$target.siblings('.tab-content').removeClass('active');
$target.addClass('active');
}
});
});
});
.tabs-container:not(.js) {
display: none;
}
.tabs {
list-style-type: none;
margin: 5px 0 0 0;
padding: 0;
clear: both;
padding-bottom: 10px;
overflow: hidden;
}
.tabs a {
width: 20%;
display: inline-block;
height: 3em;
margin: 2px;
background: #eee;
font-size: 1em;
font-weight: bold;
line-height: 3em;
text-decoration: none;
color: #333;
text-align: center;
}
.tabs a.active {
background: #EC185D;
color: #fff;
}
.tabs-container.js .tab-content {
display: none;
padding: 1em;
font-size: 2em;
background: #eee;
border-radius: 2px;
}
.tabs-container.js .tab-content.active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="container">
<div class="tabs">
tab1
tab2
tab3
tab4
</div>
<div class="tabs-container">
<article id="tab1" class="tab-content active">
<div class="tab-text">
Content1
</div>
</article>
<article id="tab2" class="tab-content">
<div class="tab-text">
Content 2
</div>
</article>
<article id="tab3" class="tab-content">
<div class="tab-text">
Content 3
</div>
</article>
<article id="tab4" class="tab-content">
<div class="tab-text">
Content4
</div>
</article>
</div>
</div>
Edit
You will always have a tiny delay, because your tabs are being built with JS. So, whatever happens, you have to load jQuery, render the DOM, wait for the document to be ready, then execute the tab building. There is no way around this, it will never be instant. As a workaround, you can hide the whole #container or even the whole document (<body>) tag, then switch it to visible after the tabs are built.
$(function() {
$('.tabs-container').addClass('js');
$('.tabs').each(function() {
const $a = $(this).find('a');
$a.on('click', function(e) {
const $this = $(this);
const href = $this.attr('href');
const $target = $(href);
if ($target.length) {
e.preventDefault();
$this.siblings('a').removeClass('active');
$this.addClass('active');
$target.siblings('.tab-content').removeClass('active');
$target.addClass('active');
}
});
});
$("body").show();
});
body {
display : none;
}
.tabs {
list-style-type: none;
margin: 5px 0 0 0;
padding: 0;
clear: both;
padding-bottom: 10px;
overflow: hidden;
}
.tabs a {
width: 20%;
display: inline-block;
height: 3em;
margin: 2px;
background: #eee;
font-size: 1em;
font-weight: bold;
line-height: 3em;
text-decoration: none;
color: #333;
text-align: center;
}
.tabs a.active {
background: #EC185D;
color: #fff;
}
.tabs-container.js .tab-content {
display: none;
padding: 1em;
font-size: 2em;
background: #eee;
border-radius: 2px;
}
.tabs-container.js .tab-content.active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="container">
<div class="tabs">
tab1
tab2
tab3
tab4
</div>
<div class="tabs-container">
<article id="tab1" class="tab-content active">
<div class="tab-text">
Content1
</div>
</article>
<article id="tab2" class="tab-content">
<div class="tab-text">
Content 2
</div>
</article>
<article id="tab3" class="tab-content">
<div class="tab-text">
Content 3
</div>
</article>
<article id="tab4" class="tab-content">
<div class="tab-text">
Content4
</div>
</article>
</div>
</div>
The issue is known as a 'FOUC', or Flash of Unstyled Content. The issue is because you're adding the js class through Javascript, which runs after the DOM has loaded. Therefore there's a slight delay between the page loading and the JS running which adds the class to hide the elements.
The best way to solve this is to add the class directly on the elements in HTML. That way they will be hidden as soon as they are loaded. Try this:
$(function() {
$('.tabs').each(function() {
const $a = $(this).find('a');
$a.on('click', function(e) {
const $this = $(this);
const href = $this.attr('href');
const $target = $(href);
if ($target.length) {
e.preventDefault();
$this.siblings('a').removeClass('active');
$this.addClass('active');
$target.siblings('.tab-content').removeClass('active');
$target.addClass('active');
}
});
});
});
.tabs {
list-style-type: none;
margin: 5px 0 0 0;
padding: 0;
clear: both;
padding-bottom: 10px;
overflow: hidden;
}
.tabs a {
width: 20%;
display: inline-block;
height: 3em;
margin: 2px;
background: #eee;
font-size: 1em;
font-weight: bold;
line-height: 3em;
text-decoration: none;
color: #333;
text-align: center;
}
.tabs a.active {
background: #EC185D;
color: #fff;
}
.tabs-container.js .tab-content {
display: none;
padding: 1em;
font-size: 2em;
background: #eee;
border-radius: 2px;
}
.tabs-container.js .tab-content.active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="container">
<div class="tabs">
tab1
tab2
tab3
tab4
</div>
<div class="tabs-container js"> <!-- note the 'js' class added here -->
<article id="tab1" class="tab-content active">
<div class="tab-text">
Content1
</div>
</article>
<article id="tab2" class="tab-content">
<div class="tab-text">
Content 2
</div>
</article>
<article id="tab3" class="tab-content">
<div class="tab-text">
Content 3
</div>
</article>
<article id="tab4" class="tab-content">
<div class="tab-text">
Content4
</div>
</article>
</div>
</div>
Following is my code
$(document).ready(function(){
$('.submenu').hide();
$('.menu').click(function(event){
event.preventDefault();
$(this).children('.submenu').slideToggle(1000);
event.stopPropagation();
});
});
li, body, a{
list-style:none;
padding:0;
margin:0;
color:white;
text-decoration:none;
}
ul{
display:flex;
margin:0;
margin:0;
background:red;
}
.menu{
background:black;
color:white;
border-right:2px solid white;
height:5rem;
width:5rem;
display:flex;
align-items:center;
justify-content:center;
position:relative;
}
.submenu{
height:300px;
width:300px;
background:purple;
position:absolute;
top:5rem;
left:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class='menu'>
<a href=''>Page 1</a>
<div class='submenu'>
<div class='page_title'></div>
<div class='page_description'></div>
</div>
</li>
<li class='menu'>
<a href=''>Page 2</a>
<div class='submenu'>
<div class='page_title'></div>
<div class='page_description'></div>
</div>
</li>
</ul>
I am trying to achieve two things in this.
When I click on the second link, the first submenu should slide Up and second open should slide down.
Here, when I click inside the first submenu after the slide down, it closes up. I want do not want it to close down, but only closes when I click on the same link tag or the next link
Alternatively, it will be great, if it can slide up when I click outside of the submenu on the body.
Any assistance is highly appreciated
Thanks
$(function() {
(function initSlideToggle() {
var $menus = $('.menu');
$menus.find('.submenu')
.on('click', function(e) {
e.stopPropagation()
})
.hide()
.end()
.on('click', function(e) {
var $this = $(e.currentTarget),
$openedSubMenus = $menus.find('.submenu:visible').not($this),
openThisSubMenu = function() {
$this.children('.submenu').stop(true, true).slideToggle(1000);
};
e.preventDefault();
e.stopPropagation();
if (!$openedSubMenus.length) {
openThisSubMenu();
}
$openedSubMenus.stop(true, true).slideToggle(1000, function() {
openThisSubMenu();
});
});
})();
});
li,
body,
a {
list-style: none;
padding: 0;
margin: 0;
color: white;
text-decoration: none;
}
ul {
display: flex;
margin: 0;
margin: 0;
background: red;
}
.menu {
background: black;
color: white;
border-right: 2px solid white;
height: 5rem;
width: 5rem;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.submenu {
height: 300px;
width: 300px;
background: purple;
position: absolute;
top: 5rem;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class='menu'>
<a href=''>Page 1</a>
<div class='submenu'>
<div class='page_title'></div>
<div class='page_description'></div>
</div>
</li>
<li class='menu'>
<a href=''>Page 2</a>
<div class='submenu'>
<div class='page_title'></div>
<div class='page_description'></div>
</div>
</li>
</ul>
I'm using the .toggle('slide'); from jquery to hide and show my submenu though I was wondering why the animation is difference. it slides from left to right and up to down instead of having a fixed height and sliding from the left to right.
HTML:
<div class="full">
<div class="pull-left text-left">
<div class="menu-header-links-container">
<ul id="menu-header-links" class="menu">
<li class="a">Menu 1</li>
<li class="b">Menu 2 </li>
</ul>
</div>
<ul class="mini-menu-a">
<li>a</li>
<li>b</li>
</ul>
<div class="mini-menu-b">
<div class="footer-links clearfix">
<ul id="menu-footer-links" class="menu">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</div>
</div>
</div>
</div>
CSS:
.full {
z-index: 1;
background: #a97b3e;
padding: 30px 60px;
margin: 0;
width: 100%;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
ul li {
display: inline-block;
margin-right: 20px;
}
ul li a {
color: #fff;
}
.navbar.navbar-default .menu-header-links-container {
float: left;
padding: 30px 0;
}
.mini-menu-a,
.mini-menu-b {
border: 1px solid #fff;
display: none;
;
float: left;
list-style: none;
margin-left: 20px;
}
ul#menu-header-links {
float: left
}
sCRIPT:
$('.menu-header-links-container .a a').on('click', function() {
$(".mini-menu-a").toggle('slide');
$(".mini-menu-b").hide();
$(this).toggleClass('open-btn').removeClass('close-btn');
$(".menu-header-links-container .follow a").toggleClass('close-btn').removeClass('open-btn');
});
$('.menu-header-links-container .b a').on('click', function() {
$(".mini-menu-b").toggle('slide');
$(".mini-menu-a").hide();
$(this).toggleClass('open-btn').removeClass('close-btn');;
$(".menu-header-links-container .subscribe a").toggleClass('close-btn').removeClass('open-btn');
});
I'm using this reference.
JS Fiddle here
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.
Basically the problem I am having is that I have some CSS that is affecting both my nav bar and slider, because they are both using and essentially the nav bar is working but the slider is being affected.
I am still pretty new to coding so I didn't know what specifically to search online to fix this problem, any help is greatly appreciated.
HTML being affected.
<div class="flexslider">
<ul class="slides">
<li>
<img src="img/barber4.jpg" alt="" style="margin:0; padding:0;display:block;">
</li>
<li>
<img src="img/menuew-2.jpg" alt="" style="margin:0; padding:0;display:block;">
</li>
</ul>
</div>
NAV BAR
<!--section1-->
<section id="top" class="Back to top">
<img alt="" style="position: absolute;left:312px;width:1280px;" width="1599" height="276" src="img/borderblacktop.png">
<div class="top-bar-container">
<div class="top-bar">
</div>
<nav class="nav-bar">
<ul>
<li>About</li>
<li><a href="#photos" >Gallery</a></li>
<li>Menu</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="header-container">
<div class="header">
</h3>
<h4>
NAV BAR CSS:
.top-bar-container .top-bar {
width: 800px;
}
.top-bar-container .top-bar .logo {
float: left;
}
.top-bar-container .top-bar .logo span {
color: #27AD60;
}
.top-bar-container .nav-bar {
float: right;
}
.top-bar-container .nav-bar ul li {
list-style-type: none;
display: inline-block;
padding: 21px 27px;
font-size:15px;
}
.top-bar-container .nav-bar ul li a:not(.active) {
text-decoration: none;
color: white;
}
.top-bar-container .nav-bar .active {
color: white;
text-decoration: none;
padding-top:34px;
}
ul {
list-style: none;
}
ul li {
display: inline-block;
}
ul li a {
display: block;
padding: 16px;
color: grey;
text-decoration: none;
position: relative;
}
ul li a:hover, ul li a.selected{
color:white;
}
ul li a.selected:before, ul li a:hover:before {
content: '';
width: 100%;
position: absolute;
top: -19px;
left: 0;
height: 3px;
background: white;
}
h3{
font-size: 121.5%;
line-height: 2.;
font-family: 'PT Sans', sans-serif;
text-align: center;
}
Your issue is that the CSS selectors are not descriptive enough. ul and li will target both HTML sections.
You can change them to classes or ids so that the selectors are more descriptive.
I would recommend reading up on CSS selectors as it will make HTML and CSS a lot easier.