We Keep Coding

Open a div from top and bottom

Here is my fiddle: http://jsfiddle.net/2tBGE/209/
I just want to open a div with animation after a user clicked on a menu item.
For example, when clicking on the second item, clicked item and previous item should push to the top of the page and below item should push to the bottom of the page.
jQuery(document).ready(function($) {
$('ul li a').on('click', function(){
$(this).parent().next().css({
'display':'block'
})
})
});
ul{
list-style: none;
background: #eee;
padding: 0;
margin: 0;
position: fixed;
bottom: 0;
width: 100%;
height: 200px;
}
.js_item{
display:none;
}
li a{
position: relative;
display: block;
padding: 10px 15px;
text-decoration: none;
}
a:hover{
background: #9c0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main">
<li>main menu1</li>
<div class="load_content_for_menu_1 js_item">1</div>
<li>main menu2</li>
<div class="load_content_for_menu_2 js_item">2</div>
<li>main menu3</li>
<div class="load_content_for_menu_3 js_item">3</div>
<li>main menu4</li>
<div class="load_content_for_menu_4 js_item">4</div>
<li>main menu5</li>
<div class="load_content_for_menu_5 js_item">5</div>
</ul>

Note: I've made a small edit to your html structure so that each .toggled_content <div> is the child of each <li>.
With the following jQuery methods you can achieve this.
slideToggle()
Display or hide the matched elements with a sliding motion.
toggleClass()
Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.
find()
Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
var allContent = $("li");
allContent.find(".toggled_content").hide();
$(".toggler").on("click", function() {
var $thisParent = $(this).parent();
if (!$thisParent.hasClass('open')) {
$thisParent
.parent()
.find(".open")
.toggleClass("open")
.find(".toggled_content")
.slideToggle();
}
$thisParent
.toggleClass("open")
.find(".toggled_content")
.slideToggle();
});
ul {
list-style: none;
background: #eee;
padding: 0;
margin: 0;
}
li a {
display: block;
padding: 10px 15px;
text-decoration: none;
}
a:hover {
background: #9c0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main">
<li>
main menu1
<div class="toggled_content">1</div>
</li>
<li>
main menu2
<div class="toggled_content">2</div>
</li>
<li>
main menu3
<div class="toggled_content">3</div>
</li>
<li>
main menu4
<div class="toggled_content">4</div>
</li>
<li>
main menu5
<div class="toggled_content">5</div>
</li>
</ul>
Edit:
Or just use the jquery-ui accordion widget.
$("#accordion").accordion({
heightStyle: "fill",
active: 3
});
$("#accordion").on("accordionactivate", function(event, ui) {
const offset = ui.newHeader[0].offsetTop;
$([document.documentElement, document.body]).animate({
scrollTop: offset
}, 200);
});
body {
margin: 0;
}
.ui-accordion {
height: 200vh; /* simulate height with content */
background: #eee;
}
.ui-accordion-header {
margin: 0;
padding: 10px 15px;
font-weight: normal;
}
.ui-accordion-header:hover {
background: #9c0;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<div id="accordion">
<h3>main menu 1</h3>
<div>1</div>
<h3>main menu 2</h3>
<div>2</div>
<h3>main menu 3</h3>
<div>3</div>
<h3>main menu 4</h3>
<div>4</div>
</div>

This might be a little more complex than it appears, because you probably do not want any of the DIVs to be made full-screen. Rather, you want the headings of all the DIVs to remain visible, and the contents of any one content div to fill all remaining vertical space.
jQueryUI does this for you, using their accordion tabs widget. You can either include jQueryUI in your project and use their functionality, or you can examine their code and see how they did it, then modify their code to work in your own project.
To incorporate jQueryUI is simple: just add it the same way you would add jQuery, right after the call to jQuery (that is, you also need jQuery for jQueryUI to work, and the link to jQueryUI must follow the link for jQuery) See this link for a code example.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

Instead of adding .css() I have added .show(). It basically does the same by adding display:block
Try adding blow
jQuery(document).ready(function($) {
$('ul li a').on('click', function() {
$('.js_item').hide('slow')
$(this).parent().next().show('slow')
})
});
ul {
list-style: none;
background: #eee;
padding: 0;
margin: 0;
position: fixed;
bottom: 0;
width: 100%;
height: 200px;
}
.js_item {
display: none;
}
li a {
position: relative;
display: block;
padding: 10px 15px;
text-decoration: none;
}
a:hover {
background: #9c0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul class="main">
<li>main menu1</li>
<div class="load_content_for_menu_1 js_item">1</div>
<li>main menu2</li>
<div class="load_content_for_menu_2 js_item">2</div>
<li>main menu3</li>
<div class="load_content_for_menu_3 js_item">3</div>
<li>main menu4</li>
<div class="load_content_for_menu_4 js_item">4</div>
<li>main menu5</li>
<div class="load_content_for_menu_5 js_item">5</div>
</ul>
Hope this helps!

Hiding nested vertical menu until mouse over (Nav menu)

I am having some trouble using jQuery to hide my vertical menu. I just learned jQuery, so I am fairly new to using it. I can't get jQuery to modify anything (change color for example, using any action.. mouseenter(), click() etc)
Help is much appreciated.
EDIT: I am getting errors in JSLint.. trying to use jQuery in brackets editor. Not sure what to do :/ First error is on line 1 using $ before defined.. any help would be awesome
This code is simply trying to change the green "link1, link2, link3" text from green to purple when mousing over "Program"
***also, is there a way to easily reduce the size of my ul li items? The area that I can currently click is larger than the text. I tried modifying my display: property, but that messes up the layout of my list.. *******
jQuery
$(document).ready(function() {
$('#headerMenu > li').mouseenter(function() {
('#headerMenu ul li a').Color('purple');
});
});
HTML:
<!DOCTYPE html>
<html>
<head>
<link type = "text/css" rel="stylesheet" href="stylesheet.css"/>
<script type='text/javascript' src='script.js'></script>
<title>Home Page</title>
</head>
<body>
<div class="header">
<ul id="headerMenu">
<li>
DROP
<ul>
<li><a href='#'>LINK 1</a></li>
<li><a href='#'>LINK 2</a></li>
<li><a href='#'>LINK 3</a></li>
</ul>
</li>
<li>LOGIN</li>
<li>ABOUT</li>
</ul>
</div>
<div class="wrapper">
<div id="mainPhoto"> fffffff
<div> change color</div>
</div>
<div id="mainScrollUp"> </div>
</div>
</body>
</html>
css code
.header {
background-color: skyblue;
font-family: sans-serif;
height: 75px;
width: 100%;
display: table;
}
/* Main centered menu on top */
#headerMenu {
text-align: center;
padding: 0;
list-style: none;
display: table-cell;
vertical-align: bottom;
}
#headerMenu > li {
display: inline-block;
text-align: center;
}
#headerMenu li a {
text-decoration: none;
color: black;
padding: 2rem;
}
#headerMenu li a:hover {
color: lightgray;
}
/* Sub Menu for Link One */
#headerMenu ul {
text-decoration: none;
list-style: none;
display: block;
color: red;
padding-left: 0;
position:absolute;
}
#headerMenu ul li a{
color:green;
}
#mainPhoto {
height: 650px;
width: 100%;
background-color: bisque;
color:palevioletred;
}
#mainScrollUp {
z-index: 1;
height: 1000px;
width: 100%;
background-color: aqua;
clear: both;
}
.fixed {
position: fixed;
top: 0;
}

error is on line 1 using $ before defined
You forgot to define jQuery. Try and add the following line to your header tag in your HTML file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Put it before your own script.js please, that way jQuery is defined before calling it in your script.
Understanding your vertical submenu goal, I came up with this:
https://jsfiddle.net/wsj59p20/
Hope it helps!

I don't think this is what you want but it fixes some of your syntax
$(document).ready(function() {
$('#headerMenu > li').mouseenter(function() {
$(this).find('ul>li>a').css('color', 'purple');
});
});
Also, your "using $ before defined" error seems to because you aren't loading jQuery at all in your sample code.

Why wont my drop down menu code work

Drop down menu will not work ! for css I used the "display: none;" to hide the list but Im wondering if this is the most efficient way to perform a drop down menu? I used this concept from a codeacademy project.
Im sure there might be some code in here that may make you cringe but please take it easy on me, I'm an absolute rookie at programming! Thank you!
$(document).ready(function() {
$('p').hover(function() {
$(this).find('ul').fadeToggle(400);
});
});
* {
margin: 0;
padding: 0;
}
.main {
margin: 0 auto;
height: 400px;
width: 400px;
}
.container {
max-width: 230px;
max-height: 300px;
margin: 0 auto;
background-color: #024F79;
}
p {
text-align: center;
color: #fff;
border-bottom: 1px solid #fff;
font-size: 18px;
padding: 8px;
}
ul {
list-style-type: none;
display: none;
}
ul li {
padding: 10px;
border-bottom: 1px solid white;
color: white;
font-size: 18px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
<div class="main">
<div class="container">
<p>How do I ?</p>
<ul>
<li>View my Transcript</li>
<li>View my Conformation Page</li>
<li>Register for Courses</li>
<li>Pay for Courses/Exams</li>
</ul>
</div>
</div>
</body>

$(this).find('ul') will look inside of the p element as a result of using this as the context. You could use .next()
$(this).next('ul').fadeToggle(400);
However, a better approach would be to restructure your html and wrap the whole p and ul with a div that has an id in order to facilitate the UI fading.
<div id="menu">
<p>How do I ?</p>
<ul>
<li>View my Transcript</li>
<li>View my Conformation Page</li>
<li>Register for Courses</li>
<li>Pay for Courses/Exams</li>
</ul>
</div>
And then use your original code except target the #menu item
$('#menu').hover(function() {
$(this).find('ul').fadeToggle(400);
});
jsFiddle Demo

Maybe instead of using JavaScript, you can use pure CSS solutions, unless you want to make some animation.

Creating Drop Down Menu on click CSS

I'm required to build a menu with 5 options, upon clicking a certain one a new sub menu is to appear. I have absolutely no idea how to do this.
/**Navigation */
nav {
border: 1px solid red;
float: left;
margin-right: 35px;
min-height: 280px;
}
nav li {
text-decoration: none;
font-weight: normal;
color: red;
list-style: none;
}
/**Content */
#section {
background-color: ;
border: 1px solid;
font: normal 12px Helvetica, Arial, sans-serif;
margin-left: 180px;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
<div class="clearfix"></div>
<nav>
<ul>
<li> Home </li>
<li> Portfolio </li>
<ul>
<li>Commercial </li>
<li>Residential </li>
<li>Heritage </li>
<li>Rennovations </li>
</ul>
<li> Services </li>
<li> About Us </li>
<li> Contact Us </li>
</ul>
</nav>

In addition to the already mentioned checkbox hack, you could also use a button as menu items, and use the :focus state to display the dropdown menu. A benefit over this is that the menu will close if you click outside of it. Some HTML elements do not naturally receive focus upon clicks; for those, you can add the "tabindex" attribute to allow them to gain focus.
ul {
list-style: none;
}
.menu > li {
float: left;
}
.menu button {
border: 0;
background: transparent;
cursor: pointer;
}
.menu button:hover,
.menu button:focus {
outline: 0;
text-decoration: underline;
}
.submenu {
display: none;
position: absolute;
padding: 10px;
}
.menu button:focus + .submenu,
.submenu:hover {
display: block;
}
<ul class="menu">
<li>
<button>Home</button>
<ul class="submenu">
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</li>
<li><button>More</button></li>
<li><button>Info</button></li>
</ul>

CSS does not have a click handler. For this reason it is impossible to do with standard CSS. You could use something called the checkbox hack, but in my humble opinion, it's a bit clunky and would be awkward to work with inside a navigation menu like your use-case requires. For this reason I would suggest jQuery or Javascript... Here is a rather simple solution using jQuery.
Basically, we hide the sub-nav from the start using display: none; Then, using jQuery, when ".parent" is clicked we toggle a class ".visible" to the sub-nav element (the nested UL) with display: block; which makes it appear. When clicked again, it disappears as the class is removed.
Note that for this to work, every nested <UL> which is a "sub-nav" MUST have the .sub-nav class, and it's parent element (the <LI>) MUST have the .parent class. Also, since this uses jQuery, you will need to hook up a jQuery library to your site. You can do this by hosting it yourself and linking it like you normally would, or you can link it from google's library service (recommended).
JSFiddle Demo
$(document).ready(function() {
$('.parent').click(function() {
$('.sub-nav').toggleClass('visible');
});
});
#nav ul.sub-nav {
display: none;
}
#nav ul.visible {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav">
<li>Home</li>
<li class="parent">About
<ul class="sub-nav">
<li>Johnny</li>
<li>Julie</li>
<li>Jamie</li>
</ul>
</li>
<li>Contact</li>
</ul>

Of course I am late but:
You can trigger a css click using a hack!!
Work with an checkbox!!
Sample:
ul{
display: none;
}
#checkbox{
opacity: 0;
}
#checkbox:checked + ul {
display: block;
}
<div class="container">
<label for="checkbox">Dropdown menu</label>
<input id="checkbox" type="checkbox" />
<ul>
<li>Dropdown link 1</li>
<li>Dropdown link 2</li>
</ul>
</div>
You can use transitions to animate the show an hide effect :)
This is just a very simple example!!
Mention: this is a CSS3 hack if you need borwser support for old browsers this is not working.

In fact, there is a possibility to get this working with pure CSS and browser element behaviour, using the checkbox hack, however at the time of writing this, it is pushing what SHOULD be done with CSS vs what COULD be done with CSS. Also It can cause some pretty terrible semantic code (after all there is a reason it is usually stated as the checkbox HACK).
Having said that, you could use it if you only have requirements for modern browsers, giving limited functionality to others and I have myself used this in production code, on an isolated chrome only project and it is pretty fun to play with.
Here is a link to read more on it:
http://css-tricks.com/the-checkbox-hack/
But again to stress, like others have on here already, that functional behaviour should really be done via JavaScript. Unless you actually want a hover based menu solution then that is a different question all together!

You will need to do this using javascript and registering a click event handler to perform your action.
If you're new to everything then you should look for some javascript tutorials (don't use W3Schools, look elsewhere) and then look at some jQuery tutorials as jQuery simplifies tasks like these.

There are many frameworks that you can use with good looking menus for your needs, not to mention they support all devices (tablets, phones and PCs).
For example in the twitter bootstrap framework there is exactly what you need, check this tutorial:
Twitter bootstrap - Navs
Read the whole Nav section, at the end they talk about Nav with dropdown for more options.
The menu of the tutorial itself is built with the Twitter bootstrap framework.

a pure css solution to your problem looks like this
Demo: http://jsfiddle.net/HyGZf/1/
you need input and label and you have to remove the href on portfolio if you only want to use css
you can add transition: all 1s ease-in-out; to the submenu if you want it to be animate
/**Navigation */
nav{
border: 1px solid red ;
float: left;
margin-right:35px;
min-height:280px;
}
nav li{
text-decoration:none;
font-weight:normal;
color:red;
list-style:none;
display:block;
width:100%;
}
/**Content */
#section{
background-color: ;
border: 1px solid;
font: normal 12px Helvetica, Arial, sans-serif;
margin-left:180px;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
#Portfolio:checked +ul ul#submenu{
height:80px;
}
#submenu{
overflow:hidden;
height:0px;
margin:0;
}
a[accesskey="2"]{
color:blue;
cursor:pointer;
text-decoration:underline;
}
the markup
<div class="clearfix"></div>
<nav>
<input id="Portfolio" type="checkbox" name="menu" hidden>
<ul>
<li> Home </li>
<li><label for="Portfolio"><a accesskey="2"> Portfolio </a></label> </li>
<ul id=submenu type="list">
<li>Commercial </li>
<li>Residential </li>
<li>Heritage </li>
<li>Rennovations </li>
</ul>
<li> Services </li>
<li> About Us </li>
<li> Contact Us </li>
</ul>
</nav>

$('#open').on('click', function(e) {
simple_showpopup("popup", e);
});
function simple_showpopup(id, evt) {
var _pnl = $("#" + id);
_pnl.show();
_pnl.css({
"left": evt.pageX - ($("#" + id).width() / 2),
"top": (evt.pageY + 10)
});
$(document).on("mouseup", function(e) {
var popup = $("#" + id);
if (!popup.is(e.target) && popup.has(e.target).length == 0) {
popup.hide();
$(this).off(e);
}
});
}
$("#popup").hide();
.defa-context-panel {
border: 1px solid black;
position: absolute;
min-width: 200px;
min-height: 150px;
background-color: #f8f8f8;
border: solid 1px #f2f2f2;
border-radius: 10px;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Open <span id="open" style="text-decoration:underline;color:blue;cursor:pointer">Click here</span>
<div id="popup" class="defa-context-panel">Content
<div>DIV inside</div>
</div>

drop down menu not working on ipad

I have an issue with my navigation menu. It's basically a logo image that when hovered a submenu slides down and then slides up when not hovered on. It works fine on desktops but the issue I am having it with mobiles devices. Specifically the iPad. For some reason the iPhone seems to translate it OK but on the iPad the first time you click the image the drop down menu slides down and then up quickly and will not appear again. I have been searching the net for a solution and have tried rewriting the menu completely to use click instead but still haven't had it work properly on an iPad. If someone could help me or point me in the right direction I would REALLY appreciate it!!
I've also put the sections of code in js fiddle
<div id="button">
<ul class="hover">
<li class="hoverli">
<img src="assets/images/menu_logo.jpg" width="210" height="160" class="menu_class"/>
<ul class="file_menu">
<li>our work
</li>
<li>about
</li>
<li>contact
</li>
<li class="#">blog
</li>
</ul>
</li>
</ul>
$(document).ready(function () {
$(".hoverli").hover(
function () {
$('ul.file_menu').slideDown('medium');
},
function () {
$('ul.file_menu').slideUp('medium');
});
$(".file_menu li").hover(
function () {
$(this).children("ul").slideDown('medium');
},
function () {
$(this).children("ul").slideUp('medium');
});
});
the css
#newmenu {
position: absolute;
height: 32px;
width: 184px;
left: 35px;
top: 100px;
margin: auto;
}
ul, li {
margin:0;
padding:0;
list-style:none;
}
#submenu {
display:none;
width:100px;
position: relative;
left: 110px;
font-family: helvetica;
font-size:12px;
}
#submenu li {
background-color: #FFFFFF;
position: relative;
}
#submenu li a {
color:#00000;
text-decoration:none;
padding:5px;
display:block;
text-align: right;
padding-right: 13px
}
.file_menu li a:hover {
color: #585858;
}
.blog {
padding-bottom: 10px;
}

As you've found, touch devices (Android included) don't handle Hover or Mouse events. Consider using .click() or .change(), which I have found to be especially useful on DDL or other menu/filtering behavior.