Dropdown menu - slideToggle challenge - javascript

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>

Related

Drop down menu with clicks

I am creating a drop down menu that shows a submenu when clicked instead of using hover.
When I click it is displayed as it should be but I would like that when I click on another option the previous one is hidden and not kept open as right now.
In advance, thank you very much to the person who takes the trouble to help me, here is the code I'm working with.
$('.parent a').on("click", function(e) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
.parent {
display: block;
position: relative;
float: left;
line-height: 30px;
background-color: #4FA0D8;
border-right: #CCC 1px solid;
}
.parent a {
margin: 10px;
color: #FFFFFF;
text-decoration: none;
}
.parent>ul {
position: absolute;
}
.child {
display: none;
}
.child li {
background-color: #E4EFF7;
line-height: 30px;
border-bottom: #CCC 1px solid;
border-right: #CCC 1px solid;
width: 100%;
}
.child li a {
color: #000000;
}
ul {
list-style: none;
margin: 0;
padding: 0px;
min-width: 10em;
}
ul ul ul {
left: 100%;
top: 0;
margin-left: 1px;
}
li:hover {
background-color: #95B4CA;
}
.parent li:hover {
background-color: #F0F0F0;
}
.expand {
font-size: 12px;
float: right;
margin-right: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu">
<li class="parent">Popular Toys
<ul class="child">
<li class="parent">Video Games <span class="expand">»</span>
<ul class="child">
<li>Car</li>
<li>Bike Race</li>
<li>Fishing</li>
</ul>
</li>
<li>Barbies</li>
<li>Teddy Bear</li>
<li>Golf Set</li>
</ul>
</li>
<li class="parent">Recent Toys
<ul class="child">
<li>Yoyo</li>
<li>Doctor Kit</li>
<li class="parent">Fun Puzzle<span class="expand">»</span>
<ul class="child">
<li><a href="#" nowrap>Cards</a></li>
<li><a href="#" nowrap>Numbers</a></li>
</ul>
</li>
<li>Uno Cards</li>
</ul>
</li>
<li class="parent">Toys Category
<ul class="child">
<li>Battery Toys</li>
<li class="parent">Remote Toys <span class="expand">»</span>
<ul class="child">
<li>Cars</li>
<li>Aeroplane</li>
<li>Helicopter</li>
</ul>
</li>
<li>Soft Toys
</li>
<li>Magnet Toys</li>
</ul>
</li>
</ul>
Move the display logic to ".active" selector in css,
.active {
display: block;
}
then try the following script.
It would check if the click is not inside current menu, if the click is anywhere but current menu, active class will be removed.
var menu = $('.parent a').next('ul')
$(document).mouseup(e => {
if (!menu.is(e.target) // if the target of the click isn't the container...
&& menu.has(e.target).length === 0) // ... nor a descendant of the container
{
menu.removeClass("active");
}
});
$('.parent a').on("click", function (e) {
$(this).next('ul').toggleClass("active");
e.stopPropagation();
e.preventDefault();
});
Here's the full code,
var menu = $('.parent a').next('ul')
$(document).mouseup(e => {
if (!menu.is(e.target) // if the target of the click isn't the container...
&& menu.has(e.target).length === 0) // ... nor a descendant of the container
{
menu.removeClass("active");
}
});
$('.parent a').on("click", function (e) {
$(this).next('ul').toggleClass("active");
e.stopPropagation();
e.preventDefault();
});
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
.parent {
display: block;
position: relative;
float: left;
line-height: 30px;
background-color: #4FA0D8;
border-right: #CCC 1px solid;
}
.parent a {
margin: 10px;
color: #FFFFFF;
text-decoration: none;
}
.parent>ul {
position: absolute;
}
.child {
display: none;
}
.active {
display: block;
}
.child li {
background-color: #E4EFF7;
line-height: 30px;
border-bottom: #CCC 1px solid;
border-right: #CCC 1px solid;
width: 100%;
}
.child li a {
color: #000000;
}
ul {
list-style: none;
margin: 0;
padding: 0px;
min-width: 10em;
}
ul ul ul {
left: 100%;
top: 0;
margin-left: 1px;
}
li:hover {
background-color: #95B4CA;
}
.parent li:hover {
background-color: #F0F0F0;
}
.expand {
font-size: 12px;
float: right;
margin-right: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu">
<li class="parent">Popular Toys
<ul class="child">
<li class="parent">Video Games <span class="expand">»</span>
<ul class="child">
<li>Car</li>
<li>Bike Race</li>
<li>Fishing</li>
</ul>
</li>
<li>Barbies</li>
<li>Teddy Bear</li>
<li>Golf Set</li>
</ul>
</li>
<li class="parent">Recent Toys
<ul class="child">
<li>Yoyo</li>
<li>Doctor Kit</li>
<li class="parent">Fun Puzzle<span class="expand">»</span>
<ul class="child">
<li><a href="#" nowrap>Cards</a></li>
<li><a href="#" nowrap>Numbers</a></li>
</ul>
</li>
<li>Uno Cards</li>
</ul>
</li>
<li class="parent">Toys Category
<ul class="child">
<li>Battery Toys</li>
<li class="parent">Remote Toys <span class="expand">»</span>
<ul class="child">
<li>Cars</li>
<li>Aeroplane</li>
<li>Helicopter</li>
</ul>
</li>
<li>Soft Toys
</li>
<li>Magnet Toys</li>
</ul>
</li>
</ul>
using siblings(), you have quickest solution:
parents("li.parent").last() keeps the highest parent li.parent of selected item
.sibling() keeps all others li.parent brothers (of main menu)
.find("ul") keeps all ul children from all li.parent brothers
$('.parent a').on("click", function(e) {
$(this).parents("li.parent").last().siblings().find("ul").hide();
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
$('.parent a').on("click", function(e) {
$(this).parents("li.parent").last().siblings().find("ul").hide();
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
.parent {
display: block;
position: relative;
float: left;
line-height: 30px;
background-color: #4FA0D8;
border-right: #CCC 1px solid;
}
.parent a {
margin: 10px;
color: #FFFFFF;
text-decoration: none;
}
.parent>ul {
position: absolute;
}
.child {
display: none;
}
.child li {
background-color: #E4EFF7;
line-height: 30px;
border-bottom: #CCC 1px solid;
border-right: #CCC 1px solid;
width: 100%;
}
.child li a {
color: #000000;
}
ul {
list-style: none;
margin: 0;
padding: 0px;
min-width: 10em;
}
ul ul ul {
left: 100%;
top: 0;
margin-left: 1px;
}
li:hover {
background-color: #95B4CA;
}
.parent li:hover {
background-color: #F0F0F0;
}
.expand {
font-size: 12px;
float: right;
margin-right: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu">
<li class="parent">Popular Toys
<ul class="child">
<li class="parent">Video Games <span class="expand">»</span>
<ul class="child">
<li>Car</li>
<li>Bike Race</li>
<li>Fishing</li>
</ul>
</li>
<li>Barbies</li>
<li>Teddy Bear</li>
<li>Golf Set</li>
</ul>
</li>
<li class="parent">Recent Toys
<ul class="child">
<li>Yoyo</li>
<li>Doctor Kit</li>
<li class="parent">Fun Puzzle<span class="expand">»</span>
<ul class="child">
<li><a href="#" nowrap>Cards</a></li>
<li><a href="#" nowrap>Numbers</a></li>
</ul>
</li>
<li>Uno Cards</li>
</ul>
</li>
<li class="parent">Toys Category
<ul class="child">
<li>Battery Toys</li>
<li class="parent">Remote Toys <span class="expand">»</span>
<ul class="child">
<li>Cars</li>
<li>Aeroplane</li>
<li>Helicopter</li>
</ul>
</li>
<li>Soft Toys
</li>
<li>Magnet Toys</li>
</ul>
</li>
</ul>
You could try with
$('.parent a').on("click", function (e) {
$('.parent ul').hide();
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});

Expand List Upward Over Other Content

We're currently using a JS plugin called Nice Select which converts select inputs into expandable ul elements. I have the ul element at the bottom of an expandable hamburger menu. The number of li items at the bottom of the menu are causing the menu to overflow and have y-scroll. To prevent this, I would like the li items to expand upward on top of the other content in the menu. I've played around with relatively positioning the elements above the ul container but haven't had much success. I've posted here a quick example of the situation. Thanks for your help!
$(function() {
$('.list').toggle();
$(".current").click(function() {
$('.list').toggle();
});
$(".option").click(function() {
$('.current').text($(this).text());
});
})
.container {
width: 100%;
height: auto;
position: absolute;
border: 3px solid black;
}
.content {
background-color: red;
height: 200px;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="content">
</div>
<div class="menu
"><span class="current" style="">United States</span>
<ul class="list">
<li class="option">United Arab Emirates</li>
<li class="option">United States</li>
</ul>
</div>
</div>
I've edited your example to provide a basic working version. I'm not entirely sure what you meant, so feel free to suggest some changes.
$(function() {
$('.list').toggle();
$(".current").click(function() {
$('.list').toggle();
});
$(".option").click(function() {
$('.current').text($(this).text());
});
})
.container {
width: 100%;
height: auto;
position: absolute;
}
.content {
background-color: red;
height: 200px;
width: 100%;
}
.menu {
//
}
.menu ul {
position: relative;
}
.menu ul li {
position: relative;
top: -100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="content">
</div>
<div class="menu">
<span class="current" style="">United States</span>
<ul class="list">
<li class="option">United Arab Emirates</li>
<li class="option">United States</li>
</ul>
</div>
</div>
$(function() {
$('.list').toggle();
$(".current").click(function() {
$('.list').toggle();
});
$(".option").click(function() {
$('.current').text($(this).text());
});
})
.container {
width: 100%;
height: auto;
position: absolute;
border: 3px solid black;
}
.content {
background-color: red;
height: 150px;
width: 100%;
}
.menu{
position:relative;
}
.list{
position:absolute;
bottom:20px;
left:0;
width:100%;
margin:0;
padding:0;
border:1px solid black;
box-sizing:border-box;
}
.list li{
background-color:white;
width:100%;
display:block;
border:1px solid black;
box-sizing:border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="content">
</div>
<div class="menu
"><span class="current" style="">United States</span>
<ul class="list">
<li class="option">United Arab Emirates</li>
<li class="option">United States</li>
</ul>
</div>
</div>

Navigation menu drop down tabs in jquery

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.

Animate using Jquery with Tab content movement

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>

item of menu (html) loads javascript into div

I have javascript for load page from menu into div. This script loads only one page because there isn't defined for the others(var page = this.href;). I don't know how continue.. How I set to after click page2 script loads into div page2.html..I need to extend this script (I am beginner). Thanks for answers.
Here is JSFIDDLE
HTML
<div id="menu">
<nav>
<ul>
<li ><a class="active" href="page1.html" ><b>Page1</b></a></li>
<li ><a href="page2.html" ><b>Page2</b></a>
</li>
<li ><b>Page3</b>
</li>
<li ><b>Page4</b></li>
<li ><b>Page5</b></li>
</ul>
</nav>
</div>
<div id="content"> </div>
CSS
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: rgb(1, 1, 1);
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
padding: 0 20px;
border-radius: 0px;
list-style: none;
position: relative;
display: inline-table;
font-family: Times New Roman;
font-size: 70%;
}
nav ul:after {
content:"";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li {
float: left;
font-family: Arial;
font-size: 1;
}
nav ul li a:hover, nav ul li a.active, nav ul li a.visited {
background: rgb(177, 2, 10);
}
nav ul li:hover a {
color: rgb(255, 255, 255);
}
nav ul li a {
display: block;
padding: 5px 45px;
color: rgb(255, 255, 255);
text-decoration: none;
position: relative;
}
#menu {
position: relative;
width: 780px;
height: 35px;
left: 50%;
margin-left: -388px;
overflow: hidden;
top: -20px;
}
#content {
position: relative;
float: center;
width: 770px;
height: 670px;
clear:both;
margin: 0 auto;
border-radius: 7px;
overflow: hidden ;
top: 0px;
border: 3px solid black;
}
JAVASCRIPT
$(document).ready(function(){
$('nav ul li a').click(function(e){
$('nav ul li a').removeClass('active');
$(this).addClass('active');
e.preventDefault();
var page = this.href;
$.get( page, function( data ) {
$( "#obsahtest" ).html( data );
});
});
});
check the js fiddle link
$(document).ready(function(){
var defaultpageurl =$('nav ul li a.active').attr('page-href');
loadhtml(defaultpageurl);
$('nav ul li a').click(function(){
$('nav ul li a').removeClass('active');
$(this).addClass('active');
var pagelink = $(this).attr('page-href');
loadhtml(pagelink);
});
function loadhtml(pageurl){
$("#content" ).load(pageurl); //its nothing but the page url name
}
});
changes on the html
<div id="menu">
<nav>
<ul>
<li ><a class="active" page-href="page1.html" ><b>Page1</b></a></li>
<li ><a href="#" page-href="page2.html" ><b>Page2</b></a>
</li>
<li ><b>Page3</b>
</li>
<li ><b>Page4</b></li>
<li ><b>Page5</b></li>
</ul>
</nav>
</div>
just i re-modified in the code & changes in
href="#" page-href="your page link"
This is your html code.I just added the active class to all the tag.
<div id="menu">
<nav>
<ul>
<li><a class="active" href="http://www.w3schools.com/tags/tag_object.asp" ><b>Page1</b></a></li>
<li><b>Page2</b></li>
<li><b>Page3</b></li>
<li><b>Page4</b></li>
<li><b>Page5</b></li>
</ul>
</nav>
</div>
<div id="content"> </div>
This is the javascript code.
anchorSelect=document.getElementsByClassName('active')
for(i=0;i<anchorSelect.length;i++){
anchorSelect[i].addEventListener('click',function(e){
e.preventDefault();
addToDiv(this.href);
});
}
function addToDiv(x){
console.log(x);
document.getElementById("content").innerHTML='<object \
type="text/html" data=' + x + ' width="100%" height=100%"></object>';
}

Categories

Resources