I'm trying to achieve a responsive menu similar to Google Plus, where the main menu options are added to or removed from the "more" drop down as the window is resized.
The menu I have currently looks like this:
Here is the code:
// JQuery
$(document).ready(function() {
$("a.drop-menu").click(function () {
$('#drop-menu').toggle();
});
});
<!-- HTML -->
<ul id="navigation">
<li>Home</li>
<li>About</li>
<li>Calendar</li>
<li>Forum</li>
<li>Gallery</li>
<li>More
<ul id="drop-menu">
<li>Contact</li>
<li>Contact</li>
</ul></li>
</ul>
/* CSS */
#navigation {
list-style-type: none;
padding: 0px;
margin: 0px;
}
#navigation li {
display: inline-block;
}
#navigation li a:link, #navigation li a:visited, #navigation li a:active {
display: block;
width: 120px;
line-height: 50px;
text-align: center;
font-weight: bold;
text-decoration: none;
background-color: #27383F;
color: #CCC8C0;
}
#navigation li a:hover, #navigation li a.active {
background-color: #2C3C53;
}
#drop-menu {
display: none;
position: absolute;
padding: 0px;
margin: 0px;
}
#drop-menu li {
display: block;
}
JSFiddle
Currently, when the browser window is re-sized the menu options collapse as follows:
However, the below image is my desired result:
I'm wondering if there is a way to accomplish this without media queries? More specifically:
How can I dynamically detect whether the window size is large enough or too small to contain the li tags in the main navigation on a single line?
How do I swap the li tags between one menu and the other?
By not using media-queries I think you can use jQuery $( window ).width(); which will return width of browser viewport.. It should be like this:
$(document).ready(function() {
$("a.drop-menu").click(function () {
$('#drop-menu').toggle();
});
if($( window ).width() < $("#navigation > li").length * (120 + 5)){
//5px is the approximation of the gap between each <li>
var html = $("#navigation > li").last().prev().html();
$("#navigation > li").last().prev().remove();
$("#drop-menu").append(html);
}
var bigger = $("#navigation > li").length + 1;
var smaller = $("#navigation > li").length;
$( window ).resize(function() {
if($( window ).width() <= smaller * (120 + 5)){
//5px is the approximation of the gap between each <li>
var html = $("#navigation > li").last().prev().html();
if(html != undefined){
$("#navigation > li").last().prev().remove();
$("#drop-menu").prepend("<li>"+html+"</li>");
bigger = $("#navigation > li").length + 1;
smaller = $("#navigation > li").length;
}
}
if($( window ).width() >= bigger * (120 + 5)){
//5px is the approximation of the gap between each <li>
var html = $("#drop-menu > li").first().html();
if(html != undefined){
$("#drop-menu > li").first().remove();
$("#navigation > li").last().before("<li>"+html+"</li>");
bigger = $("#navigation > li").length + 1;
smaller = $("#navigation > li").length;
}
};
});
});
Check out this Fiddle, I believe it's not the perfect result.. But, I believe you can use it as your starting point.. Hope it helps..
Related
Add JavaScript + jQuery code that will number the list items after loading the document
by adding the next item number in bold at the beginning;
1 Poland
2 Germany
3 Italy
My code si below:
<script type="text/javascript">
$(function (){
$('li').prepend(
each(function(index){
index++;
index + ": " + $( this ).text();
}))
;
});
</script>
</head>
<body>
<ul>
<li>Poland</li>
<li>Germany</li>
<li>Italy</li>
</ul>
</body>
Not work. I tried many times without results.
If i understand right you, you don't need to use javascript for this.
Please check below,
ul {
counter-reset: my-awesome-counter;
max-width: 350px;
counter-reset: my-awesome-counter;
list-style: none;
padding-left: 40px;
}
ul li {
margin: 0 0 0.5rem 0;
counter-increment: my-awesome-counter;
position: relative;
}
ul li:before {
content: counter(my-awesome-counter);
color: #fcd000;
font-size: 1.5rem;
font-weight: bold;
position: absolute;
left:-40px;
line-height: 20px;
width:30px;
height:30px;
top: 0;
background: black;
text-align: center;
}
<ul>
<li>Poland</li>
<li>Germany</li>
<li>Italy</li>
</ul>
And more information if you need;
https://css-tricks.com/custom-list-number-styling/
You can use ol in html (ordered list) or nice to make it using javascript or jquery because some time you may not use ol and ul maybe you want to make a counter in a table, I write a simple code for you If you have any question tell me.
// Using For Loop
/*for (let i = 0; i < $("#ul li").length; i= i + 1 ) {
$("#ul li").eq(i).prepend("<span class='counter'>" + (i + 1) + "</span> ")
}*/
// Using Each Loop
$( "#ul li" ).each(function( index ) {
$(this).prepend("<span class='counter'>" + (index + 1) + "</span> ")
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="ul">
<li>Poland</li>
<li>Germany</li>
<li>Italy</li>
</ul>
I have a menu with drop down on hover and when clicked it should open a new page.
Here is the HTML;
<ul class=“Mainmenu” id=“Mainmenu”>
<li class=“dropdown”><a onclick=“window.location.reload()”>Home</a></li>
<li class=“dropdown”><a href=“Page1.html” onclick=“Loadpage(); return false;”>About us</a>
<ul class=“dropdown-menu” id=“menu1”>
<li class=“dropdownlink” id=“link1”><a href=“#”>Domestic</a></li>
<li class=“dropdownlink” id=“link2”><a href=“#”>International</a></li>
</ul>
</li>
<li class=“dropdown”><a onclick=“Loadteampage(); return false;”>Team</a></li>
</ul>
Here is the JavaScript:
function Loadpage(){
window.location.href=“Page1.html”;
}
function Loadteampage(){
window.location.href=“Team.html”;
}
Here is the CSS
.Mainmenu{
height: 15px;
font-family: Calibri;
font-size 12. 5px;
display: inline;
position: absolute;
width: 100%;
line-height: 15px;
text-align: center;
list-style: none;
top 18px;
}
.Mainmenu a{
float: left;
font-size: 14px;
color: #FAF6AF;
text-align: center;
padding: 5px 10px;
text-decoration: none;
height: 15px;
line -height: 15px;
transition: all 0.7s ease;
}
ul.Mainmenu > li{
float: left;
position: relative;
}
ul.Mainmenu li > a{
height: 15px;
line-height: 15px;
text-align: Center;
display: block;
background: #000000;
color: #FAF6AF;
white-space: nowrap;
}
ul.Mainmenu li:hover > a{
background-color: #FAF6AF;
color #000000;
cursor: pointer;}
ul.Mainmenu > li ul {
display: none;
position: absolute;
}
ul.Mainmenu > li:hover ul{
display: block;
cursor: pointer;
}
ul.Mainmenu > li ul li{
display: block;
position: relative;
top: 25px;
left: -40px;
}
.dropdownlink a{
text-align: center;
line-height: 15px;
font-size: 12.5px;
padding: 0px 0px 0px 0px;
margin: 0;
width: 100%;
}
The “About us” should act as dropdown when hovered on and act as link when clicked. But the onclick and href on “About us” is not working. Even I tried alert(); in onclick but it’s not working.
Please find the JSFIDDLE Link below:
JSFIDDLE
Can someone help me fix this issue?
Edited to include my favorite expand a list javascript
/*
CollapsibleLists.js
An object allowing lists to dynamically expand and collapse
Created by Stephen Morley - http://code.stephenmorley.org/ - and released under
the terms of the CC0 1.0 Universal legal code:
http://creativecommons.org/publicdomain/zero/1.0/legalcode
*/
// create the CollapsibleLists object
var CollapsibleLists =
new function(){
/* Makes all lists with the class 'collapsibleList' collapsible. The
* parameter is:
*
* doNotRecurse - true if sub-lists should not be made collapsible
*/
this.apply = function(doNotRecurse){
// loop over the unordered lists
var uls = document.getElementsByTagName('ul');
for (var index = 0; index < uls.length; index ++){
// check whether this list should be made collapsible
if (uls[index].className.match(/(^| )collapsibleList( |$)/)){
// make this list collapsible
this.applyTo(uls[index], true);
// check whether sub-lists should also be made collapsible
if (!doNotRecurse){
// add the collapsibleList class to the sub-lists
var subUls = uls[index].getElementsByTagName('ul');
for (var subIndex = 0; subIndex < subUls.length; subIndex ++){
subUls[subIndex].className += ' collapsibleList';
}
}
}
}
};
/* Makes the specified list collapsible. The parameters are:
*
* node - the list element
* doNotRecurse - true if sub-lists should not be made collapsible
*/
this.applyTo = function(node, doNotRecurse){
// loop over the list items within this node
var lis = node.getElementsByTagName('li');
for (var index = 0; index < lis.length; index ++){
// check whether this list item should be collapsible
if (!doNotRecurse || node == lis[index].parentNode){
// prevent text from being selected unintentionally
if (lis[index].addEventListener){
lis[index].addEventListener(
'mousedown', function (e){ e.preventDefault(); }, false);
}else{
lis[index].attachEvent(
'onselectstart', function(){ event.returnValue = false; });
}
// add the click listener
if (lis[index].addEventListener){
lis[index].addEventListener(
'click', createClickListener(lis[index]), false);
}else{
lis[index].attachEvent(
'onclick', createClickListener(lis[index]));
}
// close the unordered lists within this list item
toggle(lis[index]);
}
}
};
/* Returns a function that toggles the display status of any unordered
* list elements within the specified node. The parameter is:
*
* node - the node containing the unordered list elements
*/
function createClickListener(node){
// return the function
return function(e){
// ensure the event object is defined
if (!e) e = window.event;
// find the list item containing the target of the event
var li = (e.target ? e.target : e.srcElement);
while (li.nodeName != 'LI') li = li.parentNode;
// toggle the state of the node if it was the target of the event
if (li == node) toggle(node);
};
}
/* Opens or closes the unordered list elements directly within the
* specified node. The parameter is:
*
* node - the node containing the unordered list elements
*/
function toggle(node){
// determine whether to open or close the unordered lists
var open = node.className.match(/(^| )collapsibleListClosed( |$)/);
// loop over the unordered list elements with the node
var uls = node.getElementsByTagName('ul');
for (var index = 0; index < uls.length; index ++){
// find the parent list item of this unordered list
var li = uls[index];
while (li.nodeName != 'LI') li = li.parentNode;
// style the unordered list if it is directly within this node
if (li == node) uls[index].style.display = (open ? 'block' : 'none');
}
// remove the current class from the node
node.className =
node.className.replace(
/(^| )collapsibleList(Open|Closed)( |$)/, '');
// if the node contains unordered lists, set its class
if (uls.length > 0){
node.className += ' collapsibleList' + (open ? 'Open' : 'Closed');
}
}
}();
the Html recommended is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vakram Mohan Help</title>
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en">
<script type="text/javascript" src="CollapsibleLists.js"></script>
</head>
<body>
<div>
<UL id="Mainmenu">
<li>
<h2><span>Menu</span></h2>
<ul>
<li> <span><a onclick=“window.location.reload()”>Home</a></span></li>
<li><span>About us</span>
<ul>
<li><span><a href=“#”>Domestic</a></span></li>
<li><span><a href=“#”>International</a></span></li>
</ul>
</li>
</ul>
</li><!--Menu end -->
</UL> <!-- Main Menu end -->
</body>
<script language="javascript" type="text/javascript">
function btntest_onclick()
{
window.location.href = "http://www.google.com";
}
</script>
<script>
CollapsibleLists.applyTo(document.getElementById('Mainmenu'));
</script>
</head>
</html>
Notice i am not using your CSS file.
it was a mess
#para1 {
text-align: center;
color: red;
}
that is a ID selector
.center {
text-align: center;
color: red;
}
that is a Class selector.
Reset.css is here
html, body, header, footer, hgroup, nav, main, article, section, figure, figcaption, h1, h2, h3, ul, li, body, div, p, img
{
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
border: 0;
}
I know there is lot of question and answer in online and stackoverflow.. but I can't solve my problem...
Please help me before give me minus.
I need to change the active list background when someone click in menu or scroll..
Like: http://stanhub.com/tutorials/change-active-state-in-sticky-navigation-on-scroll/
or like: https://www.trustwave.com/Services/Managed-Security/Threat-Correlation-Services/
I tried to manipulate them with my js code.. but I'm unable to changes them. they stuck !
Here is my code: http://codepen.io/anon/pen/dozJqw
jQuery("document").ready(function($){
var pos = $('.inner-page-nav').offset().top;
var nav = $('.inner-page-nav');
$(window).scroll(function () {
if ($(this).scrollTop() > pos) {
nav.addClass("f-nav");
(".inner-page-nav").fadeIn(3000);
('.inner-page-nav').addClass("f-nav");
} else {
nav.removeClass("f-nav");
}
});
});
$(document).on('click','.scroll_to', function(event) {
event.preventDefault();
var target = "#" + this.getAttribute('data-more-info');
$('html, body').animate({
scrollTop: $(target).offset().top - 60 }, 2000);
});
#page-nav-link{list-style:none;}
#page-nav-link li{float:left;}
.inner-page-nav{ background: #128DC3;}
.f-nav{ z-index: 2900; position: fixed; left: 0; top: 0; width: 100%;margin-top:0px;background:#128DC3;} /* this make our menu fixed top */
.page-nav-content {height: 42px;margin: 0 auto;max-width: 1170px;width: 100%;}
.page-nav-content ul { list-style: none;margin: 0; }
.page-nav-content ul li{float: left; margin: 0px 2px; padding: 10px 70px !important;}
.navActive{background:#4ccbff;}
.navActive a{color:#fff;}
.page-nav-content ul li:hover{background:#4ccbff;}
.page-nav-content ul li:hover a{color:#fff;}
.page-nav-content ul li a {font-size: 25px;line-height: 25px;}
.page-nav-content ul li a:hover {text-decoration:none;color:#fff;}
.clear{clear:both;}
a.scroll_to{
color:#fff;
cursor:pointer;
display: inline-block;
}
.box{width:100%;min-width:100px;height:500px;font-size:25px;color:#000;float:left;}
.red{background:red;}
.green{background:green;}
.blue{background:blue;}
.yellow{background:yellow;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="inner-page-nav" id="inner-page-nav">
<div class="page-nav-content">
<ul>
<li class="navActive"><a data-more-info="navOverview" href="#" class="scroll_to">Overview</a></li>
<li><a data-more-info="navFeatures" href="#" class="scroll_to">Features</a></li>
<li><a data-more-info="navWhiteBro" href="#" class="scroll_to">Whitepaper & Brochure</a></li>
<li><a data-more-info="navOrder" href="#" class="scroll_to">Order</a></li>
</ul>
<div class="clear"></div>
</div>
</div>
<div id="navOverview" class="box red">Overview</div>
<div id="navFeatures" class="box green">Features</div>
<div id="navWhiteBro" class="box blue">Brochure</div>
<div id="navOrder" class="box yellow">Order</div>
<div class="clear"></div>
Please help me.
Thank you.
<script>
var topMenu = $("#inner-page-nav"),
topMenuHeight = topMenu.outerHeight()+15,
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var item = $($(this).attr("data-more-info"));
if (item.length) { return item; }
});
// Bind to scroll
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+topMenuHeight;
// Get id of current scroll item
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
// Set/remove active class
menuItems.parent().removeClass("navActive").end().filter("[href=#"+id+"]").parent().addClass("navActive");
});
</script> try this
This should be easy, but I'm having a hard time with it.
I have a simple collapsing menu that uses SPAN tags inside LI tags, the usual.
Here's the JavaScript:
var allSpan = document.getElementsByTagName('SPAN');
for (var i = 0; i < allSpan.length; i++) {
allSpan[i].onclick = function() {
if (this.parentNode) {
var childList = this.parentNode.getElementsByTagName('UL');
for (var j = 0; j < childList.length; j++) {
var currentState = childList[j].style.display;
if (currentState == "none") {
childList[j].style.display = "block";
} else {
childList[j].style.display = "none";
}
}
}
}
}
It works just fine in hiding and showing the nested ULs. What I'd like to do is add a piece of code that also changes the SPAN of the clicked-on parent LI item.
I'm thinking it would be something like:
if(currentState=="none") {
childList[j].style.display="block";
$(this).css('background-color', 'red');
}
else {
childList[j].style.display="none";
$(this).css('background-color', 'blue');
}
I'm sure I'm missing the obvious. Could somebody please point me in the right direction?
UPDATE
Sorry, I totally forgot there was more code at the bottom:
$(function() {
$('#menu').find('SPAN').click(function(e) {
$(this).parent().find('UL').toggle();
});
});
And here is the body of the HTML:
<style TYPE="text/css">
<!--
body { background: white;color: #000000;font-family:geneva; }
a:link { color: #ff8080 }
a:visited { color: #ff0000 }
a:active { color: #a05050 }
ul { margin:0;padding:0; }
li { list-style-type: none; }
ul li span { display:block;min-height:20px;background:blue;color:white;font-weight:bold;padding: 3px 8px 3px 8px;border-top:1px solid black;border-left:1px solid black;border-right:1px solid black;margin:0; }
li ul { display:none; }
li ul li span { background:#98ff33;padding: 3px 8px 3px 8px;color:black;font-weight:normal;display:block; }
li ul li:last-child span { border-bottom:1px solid black; }
-->
</style>
</head>
<body>
<UL id="menu">
<LI class="Category"><SPAN>Solid Tumors</SPAN><UL>
<LI class="subtopic"><SPAN>Anal Cancer</SPAN></LI>
<LI class="subtopic"><SPAN>Biliary Cancer</SPAN></LI>
<LI class="subtopic"><SPAN>Bladder Cancer</SPAN></LI>
</UL>
<LI class="Category"><SPAN>Hematologic Malignancies</SPAN><UL>
<LI class="subtopic"><SPAN>Acute Myeloid Leukemia</SPAN></LI>
<LI class="subtopic"><SPAN>Acute Promyelocytic Leukemia</SPAN></LI>
</UL>
<LI class="Category"><SPAN>Reviewers</SPAN><UL>
<LI class="subtopic"><SPAN>Physician Reviewers</SPAN></LI>
<LI class="subtopic"><SPAN>Pharmacy Reviewers </SPAN></LI>
</UL>
</UL>
A simple method would be to only toggle the class of the parent li element:
$(function () {
$('#menu SPAN').click(function (e) {
$(this).parent().toggleClass('open');
});
});
And then add then using CSS to manage the colors and the show/hide by adding the following css:
#menu li.open > span {
background-color: red
}
#menu li.open ul {
display: inline
}
see: http://jsfiddle.net/3TTDJ/
Note: if you only want to do this for the first menu level and not recursive, you'll want to specify that in the selector using immediate child selector '#menu > li > SPAN':
$(function () {
$('#menu > li > SPAN').click(function (e) {
$(this).parent().toggleClass('open');
});
});
see: http://jsfiddle.net/tleish/3TTDJ/2/
Below changes the span background color or the parent listitem
http://jsfiddle.net/tuusT/2/
$('#menu').find('SPAN').click(function(e){
$('#menu').find('.active').removeClass("active");
$(this).parents(".Category").children("span:first").addClass("active")
$(this).parent().find('UL').toggle();
});
Many slider plugins that I have found are either only click to view next image or, if they do have mouse drag or touch drag capabilities, only allow images. Does anyone know of a plugin or possible way to code a mouse drag slider for any html elements? I'm specifically using an SVG, but it would be nice to have something in the future for sliding between div elements.
HTML:
<div id="slider">
<ul>
<li style="background-color: #F00"></li>
<li style="background-color: #0F0"></li>
<li style="background-color: #00F"></li>
</ul>
</div>
CSS:
#slider {
width: 400px;
overflow: hidden;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
width: 400px;
height: 400px;
float: left;
}
JS:
$(function() {
var slides = $('#slider ul').children().length;
var slideWidth = $('#slider').width();
var min = 0;
var max = -((slides - 1) * slideWidth);
$("#slider ul").width(slides*slideWidth).draggable({
axis: 'x',
drag: function (event, ui) {
if (ui.position.left > min) ui.position.left = min;
if (ui.position.left < max) ui.position.left = max;
}
});
});
jsFiddle code