Develop Reference

How can i scroll menu to current item in menu?

I have menu that contains 11 elements. 3 of it are displayed. There are buttons like a slider, that helps scrolling this menu. On my site i give special class to element, when its href == url of page(highlighting of current element). I need to move this current element in the first left position of menu on window load, so menu list must be scrolled, when page is loading, and current element stays in the first left place regardless position in list.
So that's my code:
function slideR() {
$('#menu > ul > li').first().css('left', '300px').appendTo('#menu > ul').animate({
"left": "-=300px"
}, 200);
}
function slideL() {
$('#menu > ul > li').last().animate({
"left": "+=300px"
}, 200, function() {
$(this).prependTo('#menu > ul').css('left', '0px');
});
}
$('.arrow-right').click(function() {
slideR();
});
$('.arrow-left').click(function() {
slideL();
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Segoe UI", sans-serif;
}
nav {
position: relative;
max-width: 300px;
margin: 25px auto;
}
nav > ul {
height: 50px;
text-align: center;
max-width: 300px;
overflow: hidden;
border: 2px solid #ccc;
font-size: 0;
}
nav > ul > li {
display: inline-block;
vertical-align: middle;
font-size: 16px;
}
nav > ul > li a {
color: #000;
display: block;
text-decoration: none;
line-height: 50px;
padding: 0 15px;
transition: 0.25s;
}
nav > ul > li a:hover {
background: #000;
color: #fff;
}
.arrows > .arrow {
position: absolute;
top: 50%;
border: 2px solid #f00;
z-index: 99;
width: 24px;
height: 24px;
margin-top: -12px;
cursor: pointer;
display: block;
}
.arrow-right {
right: 0;
}
.arrow-left {
left: 0;
}
.active a {
color: #029A55;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<nav id="menu">
<ul>
<li>Menu 1
</li>
<li>Menu 2
</li>
<li>Menu 3
</li>
<li>Menu 4
</li>
<li>Menu 5
</li>
<li>Menu 6
</li>
<li>Menu 7
</li>
<li>Menu 8
</li>
<li class="active">Menu 9
</li>
<li>Menu 10
</li>
<li>Menu 11
</li>
</ul>
<div class="arrows">
<span class="arrow arrow-right"></span>
<span class="arrow arrow-left"></span>
</div>
</nav>
Please help me to supplement my code to solve the problem.
I try this
var curry = document.getElementsByClassName('active')[0];
$(window).load(function() {
curry.style.left = '0px';
});
But nothing happens.

You just need to do a loop of slideR until the first child has the active class by adding the firstLoad function, like in this updated snippet.
firstLoad();
function firstLoad() {
while(!$('#menu > ul > li').first().hasClass("active")) {
slideR();
}
}
function slideR() {
$('#menu > ul > li').first().css('left', '300px').appendTo('#menu > ul').animate({
"left": "-=300px"
}, 200);
}
function slideL() {
$('#menu > ul > li').last().animate({
"left": "+=300px"
}, 200, function() {
$(this).prependTo('#menu > ul').css('left', '0px');
});
}
$('.arrow-right').click(function() {
slideR();
});
$('.arrow-left').click(function() {
slideL();
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Segoe UI", sans-serif;
}
nav {
position: relative;
max-width: 300px;
margin: 25px auto;
}
nav > ul {
height: 50px;
text-align: center;
max-width: 300px;
overflow: hidden;
border: 2px solid #ccc;
font-size: 0;
}
nav > ul > li {
display: inline-block;
vertical-align: middle;
font-size: 16px;
}
nav > ul > li a {
color: #000;
display: block;
text-decoration: none;
line-height: 50px;
padding: 0 15px;
transition: 0.25s;
}
nav > ul > li a:hover {
background: #000;
color: #fff;
}
.arrows > .arrow {
position: absolute;
top: 50%;
border: 2px solid #f00;
z-index: 99;
width: 24px;
height: 24px;
margin-top: -12px;
cursor: pointer;
display: block;
}
.arrow-right {
right: 0;
}
.arrow-left {
left: 0;
}
.active a {
color: #029A55;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<nav id="menu">
<ul>
<li>Menu 1
</li>
<li>Menu 2
</li>
<li>Menu 3
</li>
<li>Menu 4
</li>
<li>Menu 5
</li>
<li>Menu 6
</li>
<li>Menu 7
</li>
<li>Menu 8
</li>
<li class="active">Menu 9
</li>
<li>Menu 10
</li>
<li>Menu 11
</li>
</ul>
<div class="arrows">
<span class="arrow arrow-right"></span>
<span class="arrow arrow-left"></span>
</div>
</nav>

css + html menu hitbox

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

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>';
}

Dropdown menu closing after clicking on any input box

I have created a drop-down menu, in which I have created a form for search criteria.
Now, whenever I click on any input box then the menu gets closed.
Is there any way to solve it.
here is my html code :
<ul class="nav navbar-nav">
<li class="dropdown dropdown-large">
Search<b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-large row">
<center>Search Criteria</center>
<hr>
<li class="col-sm-3">
<ul>
<li>Profile ID</li>
<li>
<input type="text">
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li>Name</li>
<li>
<input type="text">
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li>Age</li>
<li>
<input type="text" size="5"> to
<input type="text" size="5">
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li>Date of Birth</li>
<li>
<input type="date">
</li>
</ul>
</li>
</ul>
</li>
and my css code :
.dropdown-large {
position: static !important;
}
.dropdown-menu-large {
margin-left: 16px;
margin-right: 16px;
padding: 20px 0px;
}
.dropdown-menu-large > li > ul {
padding: 0;
margin: 0;
}
.dropdown-menu-large > li > ul > li {
list-style: none;
}
.dropdown-menu-large > li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: normal;
}
.dropdown-menu-large > li ul > li > a:hover,
.dropdown-menu-large > li ul > li > a:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
.dropdown-menu-large .disabled > a,
.dropdown-menu-large .disabled > a:hover,
.dropdown-menu-large .disabled > a:focus {
color: #999999;
}
.dropdown-menu-large .disabled > a:hover,
.dropdown-menu-large .disabled > a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
cursor: not-allowed;
}
.dropdown-menu-large .dropdown-header {
color: #428bca;
font-size: 18px;
}
#media (max-width: 768px) {
.dropdown-menu-large {
margin-left: 0 ;
margin-right: 0 ;
}
.dropdown-menu-large > li {
margin-bottom: 30px;
}
.dropdown-menu-large > li:last-child {
margin-bottom: 0;
}
.dropdown-menu-large .dropdown-header {
padding: 3px 15px !important;
}
}

Try to use e.stopPropagation():
$(document).on('click', '.dropdown', function (e) {
e.stopPropagation();
});
Bootply Demo

toggle images for expand all and collapse all

I am trying to swap images of collapse all and expand all on click but i am reallly not getting it please can any one help me ... thanks in advance
here is the the link for the sample
http://www.ornusweb.com/showcase/checking/collapsible-menu.html
everything is working fine except the expan all collapse all buttons wen we click on it.
it should swap images
please help me !!!
Here is the css
body {
font: 10pt Arial, Helvetica, Sans-serif;
}
a {
text-decoration: none;
}
#example1,
#example2,
#example3,
#example4,
#example5 {
float: left;
}
.expand_all{
cursor: pointer;
}
.collapse_all {
cursor: pointer;
}
.example_menu {
font-size: 90%;
list-style: none;
margin: 0;
padding: 0;
vertical-align: top;
width: 624px;
}
.example_menu ul {
display: none;
list-style: none;
padding: 0;
}
#menu1,
#menu2,
#menu3,
#menu4,
#menu5 {
margin: 0;
}
#menu1 li,
#menu2 li,
#menu3 li,
#menu4 li,
#menu5 li,
.example_menu li {
background-image: none;
margin: 0;
padding-bottom: 1px;
}
.example_menu ul ul {
display: block;
}
.example_menu ul ul li a {
padding-left: 20px;
width: 109px;
}
.example_menu a {
color: #000;
cursor: pointer;
display: block;
font-weight: bold;
margin-left: 0;
padding: 10px 2px 2px 17px;
width: 605px;
height: 24px;
}
.example_menu a.expanded {
background: #E8E8E8 url('images/minusimg1.png') no-repeat 592px 50%;
}
.example_menu a.collapsed {
background: #E8E8E8 url('images/plusimg1.png') no-repeat 592px 50%;
}
.example_menu a:hover {
text-decoration: none;
}
.example_menu ul a {
background: #e8e8e8;
border-top: 2px solid #fff;
color: #000;
display: block;
font-weight: normal;
padding: 2px 2px 2px 10px;
width: 119px;
}
.example_menu ul a:link {
font-weight: normal;
}
.example_menu ul a:hover {
background : #f5f5f5;
text-decoration: underline;
}
.example_menu li.active a {
background: #fff;
}
.example_menu li.active li a {
background: #e8e8e8;
}
#menu1 li.footer,
#menu2 li.footer,
#menu3 li.footer,
#menu4 li.footer,
#menu5 li.footer,
.example_menu .footer {
background: transparent url('images/footer.jpg') no-repeat 0 0;
border-top: 2px solid #fff;
height: 9px;
line-height: 15px;
margin: 0 0 10px 0;
width: 131px;
}
.example_menu .footer span {
display: none;
}
/* nadeem css */
.newstyles{ font: 20px/18px arial;color: #0B0B0C;margin: 5px 0px 20px 5px;}
.newstyles li{ height: 32px;font: bold 12px/32px arial;color: #0B0B0C;}
.newstyline{clear: both;height: 1px;background-color: #E6E6E6;width: 100%;margin: 1px 0px 3px 0px;}
}
here is the js
$(document).ready(function() {
setTimeout(function() {
// Slide
$('#menu1 > li > a.expanded + ul').slideToggle('medium');
$('#menu1 > li > a').click(function() {
$(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> ul').slideToggle('medium');
});
$('#example1 .expand_all').click(function() {
$('#menu1 > li > a.collapsed').addClass('expanded').removeClass('collapsed').parent().find('> ul').slideDown('medium');
});
$('#example1 .collapse_all').click(function() {
$('#menu1 > li > a.expanded').addClass('collapsed').removeClass('expanded').parent().find('> ul').slideUp('medium');
});
}, 250);
});
and here is the html
<div id="example1">
<div><a class="expand_all"><img src="images/close.jpg" class="img-swap" /></a><a class="collapse_all"><img src="images/open.jpg" alt="" /></a></div>
<ul id="menu1" class="example_menu">
<li><a class="expanded">Section A</a>
<ul class="newstyles">
<li>Link A-A</li>
<div class="newstyline"> </div>
<li>Link A-B</li>
<div class="newstyline"> </div>
<li>Link A-C</li>
<div class="newstyline"> </div>
<li>Link A-D</li>
</ul>
</li>
<li><a class="expanded">Section B</a>
<ul class="newstyles">
<li>Link A-A</li>
<div class="newstyline"> </div>
<li>Link A-B</li>
<div class="newstyline"> </div>
<li>Link A-C</li>
<div class="newstyline"> </div>
<li>Link A-D</li>
</ul>
</li>
<li><a class="expanded">Section C</a>
<ul class="newstyles">
<li>Link A-A</li>
<div class="newstyline"> </div>
<li>Link A-B</li>
<div class="newstyline"> </div>
<li>Link A-C</li>
<div class="newstyline"> </div>
<li>Link A-D</li>
</ul>
</li>
</ul>
</div>

Guessing it is the two images in the top, you could do this:
<div>
<a class="expand_all" style="display: none;" onclick="$('.expand_all').hide();$('.collapse_all').show()">
<img class="img-swap" src="images/toggle-buttons_01.png">
</a>
<a class="collapse_all" onclick="$('.expand_all').show();$('.collapse_all').hide()" style="display: inline;">
<img alt="" src="images/toggle-buttons_02.png">
</a>
</div>
Simply hiding the irrelevant one....not really swapping images though.