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>';
}
Related
I have a dropdown where I have to keep 1st menu expanded & expand/collapse icon. The icon is visible only onclick. By default, the icon is not reflected. I have to insert the icon from my local. Expand/Collapse is working.Maybe my approach to writing code is wrong Please help to fix the icon issue. Below is my code. Thanks in advance.
$(document).ready(function () {
$('.sub-menu ul').hide();
$(".sub-menu a").click(function () {
$(this).parent(".sub-menu").children("ul").slideToggle("100");
$(this).find(".right").toggleClass("expand collapse");
});
$('.sub-menu a').click(function(){
if($(this).hasClass('toggIconUp')){
$(this).removeClass('toggIconUp').addClass('toggIconDown');
}else{
$(this).removeClass('toggIconDown').addClass('toggIconUp');
//var blockId = $(this).parent().attr('data-toggle-id');
}
});
});
body {
background-color: #fff;
font-size: 14px;
}
.nav {
position: relative;
margin: 50px;
width: 170px;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav ul li a {
display: block;
background: #ffffff;
padding: 10px 15px;
color: #414141;
text-decoration: none;
}
.sub-menu ul li a:hover {
background: #dedede;
}
.nav ul li a .icon_sty {
text-align: center;
float:right;
}
.nav ul ul {
background-color:#eeeeee;
}
.toggIconDown {
background-image: url(./images/down_arrow.svg) !important;
background-repeat:no-repeat !important;
background-position-x: 92% !important;
}
.toggIconUp {
background-image: url(./images/up_arrow.svg) !important;
background-repeat:no-repeat !important;
background-position-x: 92% !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="nav">
<ul>
<li class='sub-menu toggIconUp'>Panel<div class='icon_sty right'></div>
<ul class="">
<li><a href='#'>one </a></li>
<li><a href='#'>two </a></li>
<li><a href='#'>three </a></li>
<li><a href='#'>four </a></li>
<li><a href='#'>five </a></li>
</ul>
</li>
<li class='sub-menu toggIconUp'>second<div class='icon_sty right'></div>
<ul class="">
<li><a href='#'>second_one </a></li>
<li><a href='#'>second-two </a></li>
</ul>
</li>
</ul>
</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!')
}
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 wrote some code using different internet sources. I ran into a problem -
every object that's in the bottom part of the menu cannot be interacted with.
The menu interferes with everything below where the dropdown falls.
<style>
body {
padding: 0;
margin: 0;
font-family: Arial;
font-size: 23px;
}
#nav {
background-color:1a1a1a;
opacity: 0.9;
}
#nav_wrapper {
width: 960px;
margin: 0 auto;
text-align: right;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li a, visited {
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #333;
border: 0px solid #222;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: #699;
}
.left-to-right {
text-align: left;
}
</style>
<html lang="he">
<body dir-"rtl"><div id="nav">
<div id="nav_wrapper">
<div>
<ul <ul dir="RTL">
<li> תרמילים
<ul class="left-to-right">
<!-- <li class="backpacks" id="firstlight-20l"> FirstLight 20L </li>
<li class="backpacks" id="firstlight-30l"> FirstLight 30L </li>
<li class="backpacks" id="firstlight-40l"> FirstLight 40L </li>-->
<li class="backpacks"> rotation180° Professional 38L Deluxe </li>
<li class="backpacks"> rotation180° Horizon 34L </li>
<li class="backpacks"> rotation180° Panorama 22L </li>
<!-- <li class="backpacks" id="rotation180-travel-away"> rotation180° Travel Away 22L </li>-->
<li class="backpacks" id="rotation180-trail"> rotation180° Trail 16L </li>
</ul>
</li>
<li> תיקי מצלמות ספורט
<ul class="left-to-right">
<li>GP 1 kit case
</li>
<li>GP 2 kit case
</li>
</ul>
</li>
<li> אביזרים
<ul class="left-to-right">
<li>r180º Panorama/Horizon Photo Insert
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
#nav_wrapper ul ul li{ text-align:left;}
you need to add this only: demo
You might be able to use vertical-align for the list elements & text-align for the links.
Just add a class to the <ul> tag of each dropdown and add text-align: left to it.
FIDDLE Here
On my menu, there is no indication if one of the menus (parent) has a sub menu (children). As an example, in FireFox under the View menu and in Chrome under the Tools menu the arrows appear. My question is how can I have arrows appear on menus where submenus exist?
HTML
<body>
<div id="container">
<div id="nav">
<ul id="navList">
<li>Home
<!-- This is the sub nav -->
<ul class="listTab">
<li>About This Template Here</li>
<li>Flash</li>
<li>jQuery</li>
</ul>
</li>
<li>Blog
<!-- This is the sub nav -->
<ul class="listTab">
<li>About This Template Here</li>
<li>Flash</li>
<li>jQuery
<ul class="listTab">
<li>About This Template Here</li>
<li>Flash</li>
<li>jQuery</li>
</ul>
</li>
</ul>
</li>
<li>About
<!-- This is the sub nav -->
<ul class="listTab">
<li>About This Template Here</li>
<li>Flash</li>
<li>jQuery</li>
</ul>
</li>
<li>Porfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
CSS
#container {
width: 1000px;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
#nav {
width: 330px;
float: left;
margin: 50px 0 0;
}
#navList li {
list-style: none;
margin: 0 0 10px;
position: relative;
float: left;
}
#navList a {
text-decoration: none;
color: #ffffff;
background-color: #333;
padding: 5px;
display: block;
width: 250px;
}
#navList a:hover {
background-color: #06F;
}
#navList ul, #navList ul ul {
display: none;
position: absolute;
top: 0;
left: 280px;
background-color: #333;
}
.listTab {
z-index: 100;
}
#navList .listTab li {
margin: 0;
}
#navList .listTab a, #navList .listTab a:hover {
width: 250px;
}
#navList .listTab a {
padding: 5px 5px 5px 10px;
}
#navList li:hover ul ul, #navList li:hover ul ul ul, #navList li:hover ul ul ul ul {
display: none;
}
#navList li:hover ul, #navList li li:hover ul, #navList li li li:hover ul, #navList li li li li:hover ul {
display: block
jQuery
jQuery
$(document).ready(function($) {
//Menu animation
$('#navList ul').css({display: "none"}); //Fix Opera
$('#navList li').hover(function() {
$(this).addClass('addPosition');
$(this).find('a').stop().animate({'width' : "280"});
$(this).find('ul:first').css({visibility : "visible", display : "none"}).show(400);
}, function() {
$(this).find('ul:first').css({visibility : "hidden"}).hide(400);
$(this).find('a').stop().animate({'width' : "250"});
$(this).removeClass('addPosition');
});
});
Try inserting some unicode characters on the menu's?
This post answer has two main arrows : What characters can be used for up/down triangle (arrow without stem) for display in HTML?
Example Home Demo
<li>Home ▼
<!-- This is the sub nav -->
<ul class="listTab">
<li>About This Template Here</li>
<li>Flash</li>
<li>jQuery</li>
</ul>
</li>
From there, you can just modify font-sizes and positioning to move that arrow around to your liking. Using characters like this will be very lightweight for your menu. :)
those are just images that can be assigned to your li's background, and then be positioned:
#hasSubmenu{
background-image:url('images/arrow.png');
background-position:center right;
}
We could obtain with the help of after available in CSS
#navList li > a:after {
content: '>';
float:right;
}
Above code adds an arrow to every link
#navList li > a:only-child:after {
content: '';
}
Above code removes the arrow when the link is the only child
DEMO