jQuery menu not hidden completely

jQuery menu not hidden completely - javascript

So I have a menu, when you click a button it opens a Lightbox full of links. The Lightbox is supposed to show only when the button is clicked, but unfortunately a small portion (about 183px depending on screen size) shows at the very bottom of the page.
$(function() {
$('#trigger, .lightbox').click(function() {
$('.lightbox').toggleClass('close');
});
});
#menu {
text-align: center;
}
#menu ul {
list-style-type: none
}
/* Button */
button#trigger {
margin: 20px;
}
button#trigger {
background: transparent;
border: 2px solid #ff0000;
color: #000;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
font-size: 18px;
border-radius: 20px;
padding: 10px 20px;
text-decoration: none;
text-transform: uppercase;
}
button#trigger:hover {
cursor: pointer;
opacity: 0.85;
}
#menu .lightbox {
background: #000;
color: #fff;
height: 100%;
opacity: 0.85;
overflow: hidden;
padding: 35% 0 0;
position: absolute;
top: 0;
width: 100%;
z-index: 3;
}
#menu .lightbox li.current_page_item a {
border: 2px solid #ff0000;
border-radius: 20px;
color: #fff;
display: inline-block;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
padding: 10px 20px;
}
#menu .lightbox li.current_page_item a:hover {
color: #fff;
text-decoration: none;
}
#menu .lightbox a {
color: #fff;
display: inline-block;
font-family: 'Source Sans Pro', sans-serif;
font-size: 18px;
font-weight: 300;
margin: 10px;
text-decoration: none;
text-transform: uppercase;
}
#menu .lightbox a:hover {
color: #ddd;
cursor: pointer;
text-decoration: underline;
}
#menu .lightbox.close {
height: 0;
top: 100%;
}
#menu .ion-android-menu {
font-size: 20px;
}
#menu .ion-android-close {
font-size: 40px;
position: absolute;
right: 45px;
top: 18px;
}
#menu .ion-android-close:hover {
color: #ddd;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu">
<button id="trigger"><span class="ion-android-menu"><!-- --></span>
</button>
<div class="lightbox close">
<span class="ion-android-close"><!-- --></span>
<ul>
<li class="current_page_item">Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
Is there something I am missing? Not sure why it's there. This is what I have: https://jsfiddle.net/9dftx1vg/1/
I'm pretty sure this is something simple, just can't quite put my finger on it!

Add box-sizing: border-box to the lightbox CSS rule, otherwise the 35% top padding it has are added to the * height: 0* in the "hidden" state.

$(function() {
$('#trigger, .lightbox').click(function() {
$('.lightbox').toggleClass('close');
});
});
#menu {
text-align: center;
}
#menu ul {
list-style-type: none
}
/* Button */
button#trigger {
margin: 20px;
}
button#trigger {
background: transparent;
border: 2px solid #ff0000;
color: #000;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
font-size: 18px;
border-radius: 20px;
padding: 10px 20px;
text-decoration: none;
text-transform: uppercase;
}
button#trigger:hover {
cursor: pointer;
opacity: 0.85;
}
#menu .lightbox {
background: #000;
color: #fff;
height: 100%;
opacity: 0.85;
overflow: hidden;
padding: 35% 0 0;
position: absolute;
top: 0;
width: 100%;
z-index: 3;
}
#menu .lightbox li.current_page_item a {
border: 2px solid #ff0000;
border-radius: 20px;
color: #fff;
display: inline-block;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
padding: 10px 20px;
}
#menu .lightbox li.current_page_item a:hover {
color: #fff;
text-decoration: none;
}
#menu .lightbox a {
color: #fff;
display: inline-block;
font-family: 'Source Sans Pro', sans-serif;
font-size: 18px;
font-weight: 300;
margin: 10px;
text-decoration: none;
text-transform: uppercase;
}
#menu .lightbox a:hover {
color: #ddd;
cursor: pointer;
text-decoration: underline;
}
#menu .lightbox.close {
display: none;
}
#menu .ion-android-menu {
font-size: 20px;
}
#menu .ion-android-close {
font-size: 40px;
position: absolute;
right: 45px;
top: 18px;
}
#menu .ion-android-close:hover {
color: #ddd;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu">
<button id="trigger"><span class="ion-android-menu"><!-- --></span>
</button>
<div class="lightbox close">
<span class="ion-android-close"><!-- --></span>
<ul>
<li class="current_page_item">Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
Just add display none to lightbox when closed

This might be the easy one, if you add width:0; on #menu .lightbox.close style rule.
See the Snippet below:
$(function() {
$('#trigger, .lightbox').click(function() {
$('.lightbox').toggleClass('close');
});
});
#menu {
text-align: center;
}
#menu ul {
list-style-type: none
}
/* Button */
button#trigger {
margin: 20px;
}
button#trigger {
background: transparent;
border: 2px solid #ff0000;
color: #000;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
font-size: 18px;
border-radius: 20px;
padding: 10px 20px;
text-decoration: none;
text-transform: uppercase;
}
button#trigger:hover {
cursor: pointer;
opacity: 0.85;
}
#menu .lightbox {
background: #000;
color: #fff;
height: 100%;
opacity: 0.85;
overflow: hidden;
padding: 35% 0 0;
position: absolute;
top: 0;
width: 100%;
z-index: 3;
}
#menu .lightbox li.current_page_item a {
border: 2px solid #ff0000;
border-radius: 20px;
color: #fff;
display: inline-block;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
padding: 10px 20px;
}
#menu .lightbox li.current_page_item a:hover {
color: #fff;
text-decoration: none;
}
#menu .lightbox a {
color: #fff;
display: inline-block;
font-family: 'Source Sans Pro', sans-serif;
font-size: 18px;
font-weight: 300;
margin: 10px;
text-decoration: none;
text-transform: uppercase;
}
#menu .lightbox a:hover {
color: #ddd;
cursor: pointer;
text-decoration: underline;
}
#menu .lightbox.close {
height: 0;
width:0; /*ADD THIS ONE*/
top: 100%;
}
#menu .ion-android-menu {
font-size: 20px;
}
#menu .ion-android-close {
font-size: 40px;
position: absolute;
right: 45px;
top: 18px;
}
#menu .ion-android-close:hover {
color: #ddd;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu">
<button id="trigger"><span class="ion-android-menu"><!-- --></span>
</button>
<div class="lightbox close">
<span class="ion-android-close"><!-- --></span>
<ul>
<li class="current_page_item">Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>

Related

Add to the drop-down list the ability to select an element

I wrote a drop-down list function, where there are three <a> elements; how do I add the ability to select from among <a> so that the selected element is displayed as active instead of button?
function dropdownMenu() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
let dropdowns = document.getElementsByClassName("dropdown-content");
for (let i = 0; i < dropdowns.length; i++) {
let openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.dropbtn {
background: #F0F0F0;
width: 262px;
height: 40px;
border: none;
cursor: pointer;
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 100%;
margin-left: 23px;
margin-bottom: 10px;
}
.dropbtn:hover {
background-color: #979797;
transition: all ease 0.4s;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
width: 262px;
height: 132px;
position: absolute;
background: #FFFFFF;
box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);
z-index: 1;
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 100%;
margin-left: 23px;
}
.dropdown-content a {
color: black;
padding: 15px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #FAFAFA;
}
.show {
display: block;
}
<button onclick="dropdownMenu()" class="dropbtn">ACTIVE</button>
<div id="myDropdown" class="dropdown-content">
ONE
TWO
THREE
</div>

Use the select element.
EDIT1
Select options cannot have many styles, so we need to implement it using other elements:
function dropdownMenu() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (event.target.matches('#myDropdown a')) {
myDropdown.classList.remove('show');
document.querySelector('.dropbtn').innerText = event.target.innerText; //get the selected text!
}
}
.dropbtn {
background: #F0F0F0;
width: 262px;
height: 40px;
border: none;
cursor: pointer;
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 100%;
margin-left: 23px;
margin-bottom: 10px;
}
.dropbtn:hover {
background-color: #979797;
transition: all ease 0.4s;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
width: 262px;
height: 132px;
position: absolute;
background: #FFFFFF;
box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);
z-index: 1;
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 100%;
margin-left: 23px;
}
.dropdown-content a {
color: black;
padding: 15px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #FAFAFA;
}
.show {
display:block;
}
<button onclick="dropdownMenu()" class="dropbtn">ACTIVE</button>
<div id="myDropdown" class="dropdown-content">
ONE
TWO
THREE
</div>

close and open menu on click in mobile view is not working?

I have a mobile menu where user click on caret icon of sub-menus and it open and When user click again on that caret icon it should be closed but it is not working in mobile view.
body {
font-family: 'Poppins', sans-serif;
font-family: FuturaBT-Book, sans-serif;
background-color: #fff;
font-size: 16px;
color: #666;
line-height: 24px
}
.main-top {
color: white;
font-size: 24px;
margin-bottom: 0px;
margin-top: 10px;
font-family: 'Poppins', sans-serif;
font-weight: 500;
}
a.linktour:link {
color: #666666;
text-decoration: none;
}
.services-details-information .last-section li a.active {
background-color: #fc453e;
border-color: #f64c67;
color: #fff
}
.main-navigation-top {
padding: 15px 60px 15px;
}
.
.main-navigation-top .navbar-inverse .navbar-nav>li>a {
font-size: 17px;
color: #8a623d;
}
.main-navigation-top .navbar-inverse .navbar-nav>li>a:hover,
.main-navigation-top .navbar-inverse .navbar-nav>li>a:focus {
color: #F30;
}
.main-navigation-top .navbar-inverse .navbar-brand img {
float: left;
margin-right: 15px;
position: relative;
top: -12px;
}
.main-navigation-top .navbar-inverse .navbar-brand {
font-size: 28px;
font-weight: 600;
font-family: 'Poppins', sans-serif;
color: #000;
}
.main-navigation-top .navbar-inverse .navbar-brand span {
display: block;
font-size: 14px;
letter-spacing: 2px;
font-weight: 400;
}
.main-navigation-top .navbar-inverse .navbar-nav>.open>a,
.main-navigation-top .navbar-inverse .navbar-nav>.open>a:focus,
.main-navigation-top .navbar-inverse .navbar-nav>.open>a:hover {
background: none;
}
.main-navigation-top .navbar-nav>li>.dropdown-menu .container {
position: fixed !important;
left: 0;
right: 0;
margin: auto;
box-shadow: 0 0 10px #f3f3f3;
padding: 30px 20px;
background: #fff;
z-index: 99;
}
.main-navigation-top .navbar-nav>li>.dropdown-menu .container .col-lg-3 h3 {
font-size: 17px;
color: #8a623d;
}
.main-navigation-top .navbar-nav>li>.dropdown-menu .container ul {
list-style: none;
float: left;
width: 100%;
min-height: 110px;
}
.main-navigation-top .navbar-nav>li>.dropdown-menu .container ul li {
line-height: 24px;
background: url(../../img/right-arrow.png) no-repeat left top 8px;
background-size: 9px;
padding: 0px 17px;
}
.main-navigation-top .navbar-nav>li>.dropdown-menu .container ul li a {
color: #8a623d;
line-height: 18px;
}
.main-navigation-top .navbar-nav>li>.dropdown-menu .container ul li a span {
float: right;
margin-top: 3px;
}
.main-navigation-top .navbar-nav>li>.dropdown-menu .container ul li a:hover {
color: #F30;
}
.main-navigation-top .dropdown-menu {
background: none;
border-radius: 0;
box-shadow: none;
border: none;
}
.dropdown-menu {
width: 100%;
}
.main-navigation-top .navbar-inverse .navbar-nav>li:nth-child(2) .dropdown-menu .container .col-lg-3 {
min-height: 260px;
padding-bottom: 20px;
}
.header-text h1 {
color: #fff;
font-size: 60px;
font-weight: 700;
text-transform: capitalize;
}
.header-text h1 span {
color: #FF9F1C;
}
.header-text p {
color: #fff;
font-size: 16px;
margin-bottom: 30px;
}
.header-search-form-area input {
display: inline-block;
}
.header-search-form-area input[type="text"] {
background: #fff;
border: none;
color: #000;
font-weight: 400;
padding: 15px;
width: 40%;
}
.header-search-form-area input[type="submit"] {
background: #FF9F1C;
border: none;
color: #fff;
font-weight: 400;
padding: 15px;
width: 10%;
}
.header-top-area {
position: fixed;
left: 0;
top: 0;
width: 100%;
padding: 10px 60px 25px;
z-index: 999;
-webkit-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
background: #fff;
box-shadow: 0 0 10px #f2f2f2;
}
}
.logo {
padding-top: 20px;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.logo img {
width: 150px;
}
.mainmenu .navbar-nav li {
padding: 13px 5px 12px;
}
.mainmenu .navbar-nav li a {
color: #8a623d;
text-transform: capitalize;
font-size: 17px;
padding-right: 0;
padding-left: 0;
padding: 10px 12px;
-webkit-transition: .3s;
transition: .3s;
font-weight: 400;
}
.mainmenu .navbar-nav img {
padding: 10px;
box-shadow: 0 0 10px #f2f2f2;
}
.mainmenu .navbar-nav li a:hover {
background: none;
color: #FF9F1C;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.caret {
background: url(../../img/top-arrow.png) no-repeat right;
border: none;
width: 9px;
height: 6px;
margin-left: 5px;
}
.nav li a:focus,
.nav li a:hover {
background: none;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.navbar {
margin: 0;
}
#nav-link-hover-bg: #eeeeee;
#nav-tabs-border-color: #dddddd;
#border-radius-base: 5px;
#screen-xs-max: 767px;
//css to add hamburger and create dropdown
.nav-tabs.nav-tabs-dropdown,
.nav-tabs-dropdown {
#media (max-width: #screen-xs-max) {
border: 1px solid #nav-tabs-border-color;
border-radius: #border-radius-base;
overflow: hidden;
position: relative;
&::after {
content: "☰";
position: absolute;
top: 8px;
right: 15px;
z-index: 2;
pointer-events: none;
}
&.open {
a {
position: relative;
display: block;
}
>li.active>a {
background-color: #f5e6d7;
}
}
li {
display: block;
padding: 0;
vertical-align: bottom;
}
>li>a {
position: absolute;
top: 0;
left: 0;
margin: 0;
width: 100%;
height: 100%;
display: inline-block;
border-color: transparent;
&:focus,
&:hover,
&:active {
border-color: transparent;
}
}
>li.active>a {
display: block;
border-color: transparent;
position: relative;
z-index: 1;
background: #fff;
&:focus,
&:hover,
&:active {
border-color: transparent;
}
}
}
}
.nav-tabs.nav-justified>li {
width: 0px;
background: #f4f7f9;
border-right: #fff 2px solid;
}
.nav-tabs.nav-justified>li:last-child {
border: none;
}
.nav-tabs.nav-justified>li>a {
padding: 16px 26px;
border-radius: 0px;
color: #000;
border-bottom: none;
}
.nav-tabs.nav-justified>li>a:hover {
background: #f5e6d7;
border-right: #f5e6d7 1px solid;
background: url(../img/tb-arrow.png) no-repeat bottom center;
}
.nav-tabs.nav-justified>.active>a,
.nav-tabs.nav-justified>.active>a:focus,
.nav-tabs.nav-justified>.active>a:hover {
background: #f5e6d7;
border: none;
}
.megamenu .nav,
.megamenu .collapse,
.megamenu .dropup,
.megamenu .dropdown {
position: static;
}
.megamenu .container {
position: relative;
}
.megamenu .dropdown-menu {
left: auto;
}
.megamenu .megamenu-content {
padding: 15px;
}
.megamenu .megamenu-content h3 {
margin-top: 0;
color: #428bca;
font-size: 18px;
}
.megamenu .dropdown.megamenu-fw .dropdown-menu {
left: 0;
right: 0;
}
#media(min-width:120px) and (max-width:767px) {
.main-navigation-top {
padding: 15px;
}
.main-navigation-top .navbar-inverse .navbar-toggle {
border: none;
}
.main-navigation-top .navbar-inverse .navbar-toggle:focus,
.main-navigation-top .navbar-inverse .navbar-toggle:hover {
background: none;
}
.main-navigation-top .navbar-inverse .navbar-nav>li:nth-child(1) .dropdown-menu .container .col-lg-3,
.main-navigation-top .navbar-inverse .navbar-nav>li:nth-child(2) .dropdown-menu .container .col-lg-3,
.main-navigation-top .navbar-inverse .navbar-nav>li:nth-child(3) .dropdown-menu .container .col-lg-3,
.main-navigation-top .navbar-inverse .navbar-nav>li:nth-child(4) .dropdown-menu .container .col-lg-3,
.main-navigation-top .navbar-inverse .navbar-nav>li:nth-child(5) .dropdown-menu .container .col-lg-3 {
min-height: inherit;
padding-bottom: 15px
}
.main-navigation-top .navbar-nav>li>.dropdown-menu .container .col-lg-3 h3 {
margin-top: 0px;
}
.main-navigation-top .navbar-nav>li>.dropdown-menu .container {
position: inherit;
margin: 0 auto;
min-height: inherit;
padding: 15px 0;
}
.navbar-toggle .icon-bar {
width: 32px;
}
.main-navigation-top .carousel-inner>.item>a>img,
.main-navigation-top .carousel-inner>.item>img,
.main-navigation-top .img-responsive,
.thumbnail a>img,
.main-navigation-top .thumbnail>img {
display: none;
}
.header-top-area {
padding: 20px 15px;
}
.navbar-toggle .icon-bar {
background: #8a623d !important;
margin-top: 5px;
}
.services-details-area {
padding: 20px 15px;
}
.nav-tabs.nav-justified>li {
width: 100%;
text-align: center;
}
.nav-tabs.nav-justified>li>a {
padding: 5px 26px;
}
.mainmenu .navbar-nav li {
margin-left: 0px;
}
.caret {
float: right;
margin-top: 11px;
}
.about-services .col-lg-12 {
padding: 20px 15px;
}
.main-navigation-top .navbar-inverse .navbar-brand {
font-size: 20px;
}
.main-navigation-top .navbar-inverse .navbar-collapse,
.main-navigation-top .navbar-inverse .navbar-form {
border-top: none;
margin-top: 25px;
}
.main-navigation-top .navbar-inverse .navbar-nav>li:nth-child(2) .dropdown-menu .container .col-lg-3 img {
display: none;
}
}
#media (min-width:767px) and (max-width:1024px) {
.main-navigation-top .navbar-inverse .navbar-nav>li>a {
font-size: 15px;
}
.nav-tabs.nav-justified>li>a {
padding: 16px 18px;
}
.main-navigation-top .navbar-inverse .navbar-nav>li>a {
padding: 10px 10px;
}
.mamm {
padding-left: 15px !important;
padding-right: 15px !important;
}
.main-navigation-top .carousel-inner>.item>a>img,
.main-navigation-top .carousel-inner>.item>img,
.main-navigation-top .img-responsive,
.thumbnail a>img,
.main-navigation-top .thumbnail>img {
display: none;
}
#sidebar {
display: block;
}
#media only screen and (max-width: 550px) {
#sidebar {
display: none;
}
}
#media (max-width: 550px) {
.main-navigation-top .navbar-nav>li>.dropdown-menu .container ul {
list-style: none !important;
float: none !important;
width: 100% !important;
min-height: 60px !important;
}
h2 {
font-size: 20px;
}
.menuleftbar2 {
display: none;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid main-navigation-top">
<div class="row">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<img src="https://www.die-aethiopienreise.de/img/menu-bar.png" width="78">
</button>
<a class="navbar-brand" href="/index.html"> B <span>Studi</span></a>
</div>
<div id="navbar" class="navbar-collapse collapse" aria-expanded="false" style="height: 0px;">
<ul class="nav navbar-nav">
<li class="dropdown megamenu">
Äthiopien Reisen <span class="caret"></span>
<ul class="dropdown-menu" style="display: none;">
<div class="container">
<div class="col-lg-3">
<h3 style="margin-top:-1px;">Stud</h3>
<ul>
<li>Äthiopien Intensiv <span>24 Tage</span> </li>
</ul>
</div>
</div>
</ul>
<div class="clearfix"></div>
</li>
<li class="dropdown megamenu">
Äthiopien Informationen<span class="caret"></span>
<ul class="dropdown-menu" style="display: none;">
<div class="container">
<div class="col-lg-3">
<h3>Reiseinformationen</h3>
<ul>
<li>Wissenwertes</li>
<li>Reisewetter</li>
</ul>
</div>
<div class="col-lg-3">
<h3>Landesinformationen</h3>
<ul>
<li>Nationalparks</li>
</ul>
</div>
</div>
</ul>
<div class="clearfix"></div>
</li>
<li class="dropdown megamenu">
Katalog <span class="caret"></span>
<ul class="dropdown-menu" style="display: none;">
<div class="container">
<div class="col-lg-2">
<ul>
<li>KatalogDownload</li>
<li>Katalogbestellung</li>
</ul>
</div>
</div>
</ul>
<div class="clearfix"></div>
</li>
<li class="dropdown megamenu">
Kontakt <span class="caret"></span>
<ul class="dropdown-menu" style="display: none;">
<div class="container">
<div class="col-lg-2">
<ul>
<li>Kontakt</li>
<li>Reiseanmeldung</li>
</ul>
</div>
</div>
</ul>
<div class="clearfix"></div>
</li>
</ul>
</div>
</nav>
</div>
</div>
drop-down will open now again when user click on the icon it should be closed but it is not working as expected!

How to make an element remain active when click on other element?

I'm working with this code:
$('.tab1-c').show();
$('.one').click(function(){
"use strict";
$('.tab1-c').show();
$('.tab2-c').hide();
$('.tab3-c').hide();
$('.tab4-c').hide();
});
$('.two').click(function(){
"use strict";
$('.tab1-c').hide();
$('.tab2-c').show();
$('.tab3-c').hide();
$('.tab4-c').hide();
});
$('.three').click(function(){
"use strict";
$('.tab1-c').hide();
$('.tab2-c').hide();
$('.tab3-c').show();
$('.tab4-c').hide();
});
$('.four').click(function(){
"use strict";
$('.tab1-c').hide();
$('.tab2-c').hide();
$('.tab3-c').hide();
$('.tab4-c').show();
});
.tab-nav-wrapper {
max-width: auto;
margin: 0 auto;
font-family: Open sans;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;
}
.tab-content-wrapper {
background-color:#fff;
width: auto;
min-height: auto;
padding: 15px 35px 5px;
margin: 0 auto;
text-align:justify;
}
.tab1-c , .tab2-c, .tab3-c, .tab4-c{ display:none
}
.tab-nav-wrapper ul li {
text-align: center;
display: inline-block;
width: 25%;
margin: 0;
text-decoration: none;
color: #000;
}
.tab-nav-wrapper a {
display: inline-block;
width: 25%;
padding: .75rem ;
margin: 0;
text-decoration: none;
color: #000;
}
.fonts-content {
font-family: droid serif;
font-size: 15px;
line-height: 20px;
color: #000000 !important;
text-indent: 50px;
}
.two {
}
.two:hover ~ hr {
margin-left: 24.5%;
background: #d48344;
}
.three {
}
.three:hover ~ hr {
margin-left: 49%;
background: #706a87;
}
.four {
}
.four:hover ~ hr {
margin-left: 74%;
background: #47435f;
}
hr {
height: .25rem;
width: 25%;
margin: 0;
background: #d4bba7;
border: none;
transition: .3s ease-in-out;
}
h4 {
font-size: 30px;
font-family: Glegoo;
font-weight: bold;
margin-bottom: 15px;
margin-top: 20px;
line-height: 35px;
font-color: #000 !important;
text-align: center;
}
<div class="tab-nav-wrapper">
<ul>
<li class="one">Story #1</li><!--
--><li class="two">Story #2</li><!--
--><li class="three">Story #3</li><!--
--><li class="four">Story #4</li>
<hr>
</ul>
</div>
I would like for the element below each category to remain active when I hover over the other categories. I don't want it to jump back to its original position when clicking a different category. I want it to remain depending on which category I click.
Help please?

This is possible by using a little extra CSS and jQuery (I added #oneActive, #twoActive... ). Additionally, I cleaned up your jQuery a bit and rewrote most of it to get active to work.
$('.tab1-c').show();
mapping = {
"one":"tab1-c",
"two":"tab2-c",
"three":"tab3-c",
"four":"tab4-c"
};
$('.one, .two, .three, .four').click(function(){
$('.' + mapping[$(this).attr("class")])
.show()
.siblings()
.hide();
$(this)
.attr('id', $(this).attr("class") + "Active")
.siblings()
.attr("id","");
});
.tab-nav-wrapper {
max-width: auto;
margin: 0 auto;
font-family: Open sans;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;
}
.tab-content-wrapper {
background-color:#fff;
width: auto;
min-height: auto;
padding: 15px 35px 5px;
margin: 0 auto;
text-align:justify;
}
.tab1-c , .tab2-c, .tab3-c, .tab4-c{ display:none
}
.tab-nav-wrapper ul li {
text-align: center;
display: inline-block;
width: 25%;
margin: 0;
text-decoration: none;
color: #000;
}
.tab-nav-wrapper a {
display: inline-block;
width: 25%;
padding: .75rem ;
margin: 0;
text-decoration: none;
color: #000;
}
.fonts-content {
font-family: droid serif;
font-size: 15px;
line-height: 20px;
color: #000000 !important;
text-indent: 50px;
}
.two {
}
.two:hover ~ hr, #twoActive ~ hr {
margin-left: 24.5%;
background: #d48344;
}
.three {
}
.three:hover ~ hr, #threeActive ~ hr {
margin-left: 49%;
background: #706a87;
}
.four {
}
.four:hover ~ hr, #fourActive ~ hr {
margin-left: 74%;
background: #47435f;
}
hr {
height: .25rem;
width: 25%;
margin: 0;
background: #d4bba7;
border: none;
transition: .3s ease-in-out;
}
h4 {
font-size: 30px;
font-family: Glegoo;
font-weight: bold;
margin-bottom: 15px;
margin-top: 20px;
line-height: 35px;
font-color: #000 !important;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-nav-wrapper">
<ul>
<li class="one">Story #1</li><!--
--><li class="two">Story #2</li><!--
--><li class="three">Story #3</li><!--
--><li class="four">Story #4</li>
<hr>
</ul>
</div>
<div>
<div class="tab1-c">test1</div>
<div class="tab2-c">test2</div>
<div class="tab3-c">test3</div>
<div class="tab4-c">test4</div>
</div>

How to hide the information, just only show when button is clicked html, css. javascript?

I want to know how to hide the information for terms(button) and enumeration(Button). The information should only appear when a button is clicked or chosen. Hope for good answers. Thank you!! If you have suggestion to my html and css that will make that show and hide easily made.
#charset "utf-8";
body {
width: 960px;
overflow-x: hidden;
}
}html, body {
height: 100%;
}
body {
margin: 0px;
padding: 0px;
background: #ffffff;
font-family: 'Raleway', sans-serif;
font-size: 11pt;
font-weight: 400;
color: #363636;
}
a{text-decoration:none}
.wrapper{
text-align: center;
width: 100%;
position: absolute;
}
.header{
background-color: #ffffff;
}
.header img {
width: 360px;
}
#nav {
background-color: black;
width: 100%;
font-size: 1em;
border-top-width: medium;
border-top-style: groove;
border-bottom-style: groove;
border-bottom-width: medium;
}
#nav a{ letter-spacing: 1px;}
#nav ul {
list-style: none;
display: block;
font-size: larger;
}
#nav ul li {
display: inline-block;
}
#nav ul {
text-align: center;
}
#nav ul li a {
color: #ffffff;
text-decoration: none;
display: block;
padding-top: 10px;
padding-right: 15px;
padding-left: 15px;
padding-bottom: 10px;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
text-transform: uppercase;
position: relative;
}
#nav ul li a:hover {
color: #fff;
}
#cssmenu ul li a:hover:before {
width: 100%;
}
#nav ul li a.active {
text-decoration:underline;
color: #EDF0BA;
}
div.navigation li { list-style: none; }
div.navigation li:hover { background: #555; }
div.navigation li:hover ul { display: block; }
.how, .about{
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
margin-left: 10%;
margin-right: 10%;
background-color: white;
text-align: left;
color: black;
}
.sectiontitle{
text-align: center;
color: black;
text-shadow: 1px 1px 2px #767676;
}
.footer{
background-color: black;
width: 100%;
border-style: groove hidden hidden;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
padding-top: 1%;
padding-bottom: 1%;
font-size: 1em;
color: #FFFFFF;
font-variant: small-caps;
vertical-align: middle;
}
.addnotes {
float: left;
padding-left: 2%;
font-color: black;
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon-trash:before {
content: "\e020";
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.btn-sm,
{
padding: 5px 10px;
font-size: 12px;
line-height: 1px;
border-radius: 3px;
}
.btn-default{color:#333;background-color:#fff;border-color:#ccc}
.listnotes {
margin: 0;
padding: 0;
list-style-type: none;
}
.listnotes li {
background: url('noteicon.png') no-repeat;
width: 220px;
height: 135px;
margin-left: 45%;
padding-top: 5%;
margin-bottom: 10px;
}
.noteTitle {
float: left;
left: 0%;
left: 0%;
color: black;
}
.buttons{
margin-top: 100px;
color: black;
}
.createcontent {
float: right;
padding-right: 25%;
width: 50%;
margin: 0 auto;
}
.definition {
padding-top: 10%;
}
.enumeration {
padding-top: 15%;
}
#titletextbox {
background: transparent;
border: none;
width: 100%;
}
#media screen and (max-width:320px){
.wrapper{
width: 320px;
}
#nav {
background-color: black;
width: 100%;
font-size: 10px;
border-top-width: thin;
border-top-style: thin;
border-bottom-style: thin;
border-bottom-width: thin;
}
#logo{
margin-top: 5px;
width: 50%;
}
.footer{
background-color: black;
width: 100%;
border-style: groove hidden hidden;
padding-bottom: 1%;
color: #FFFFFF;
font-variant: small-caps;
vertical-align: middle;
}
.listnotes li {
background: url('noteicon.png') no-repeat;
width: 100;
height: 100;
margin-left: 35%;
padding-top: 5%;
margin-bottom: 10px;
}
.createcontent{
font-size: 14px;
}
.listnotes{
font-size: 14px;
}
a{text-decoration:none}
}
#font-face {
font-family:'Glyphicons Halflings';
src:url(../fonts/glyphicons-halflings-regular.eot?#iefix) format(embedded-opentype),url(../fonts/glyphicons-halflings-regular.woff2) format(woff2),url(../fonts/glyphicons-halflings-regular.woff) format(woff),url(../fonts/glyphicons-halflings-regular.ttf) format(truetype),url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format(svg);
}
.glyphicon {
position:relative;
top:1px;
display:inline-block;
font-family:'Glyphicons Halflings';
font-style:normal;
font-weight:400;
line-height:1;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
.glyphicon-plus:before {
content:"\2b";
}
.glyphicon-remove:before {
content:"\e014";
}
.glyphicon-trash:before {
content:"\e020";
}
.glyphicon-floppy-save:before {
content:"\e175";
}
.btn {
display:inline-block;
margin-bottom:0;
font-size:14px;
font-weight:400;
line-height:1.42857143;
text-align:center;
white-space:nowrap;
vertical-align:middle;
-ms-touch-action:manipulation;
touch-action:manipulation;
cursor:pointer;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
background-image:none;
border:1px solid transparent;
border-radius:3px;
padding:6px 12px;
}
.btn.focus,.btn:focus,.btn:hover {
color:#333;
text-decoration:none;
}
.btn.active,.btn:active {
background-image:none;
outline:0;
-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);
box-shadow:inset 0 3px 5px rgba(0,0,0,.125);
}
.btn-default {
margin-top: 10px;
color:#333;
background-color:#fff;
border-color:#ccc;
}
.btn-default.active,.btn-default.focus,.btn-default:active,.btn-default:focus,.btn-default:hover,.open>.dropdown-toggle.btn-default {
color:#333;
background-color:#e6e6e6;
border-color:#adadad;
}
.btn-primary {
color:#fff;
margin-left: -50px;
background-color:#337ab7;
border-color:#2e6da4;
margin-top: 10px;
}
.btn-primary1 {
color:#fff;
margin-left: -10px;
background-color:#337ab7;
border-color:#2e6da4;
margin-top: 10px;
margin-left:20px;
}
.form-control {
width:100%;
height:20px;
font-size:14px;
line-height:1.42857143;
color:#555;
background-color:#fff;
background-image:none;
border:1px solid #ccc;
border-radius:4px;
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
padding:6px 12px;
}
.col-sm-2 {
width:20%;
float: left;
font-size: 20px;
margin-top: 20px;
}
.col-sm-10 {
width:80%;
float: left;
margin-top: 20px;
}
.DemoBS2{
margin-top: 110px;
margin-left: 40px;
display:block;
margin-bottom:0;
font-size:14px;
text-align:left;
vertical-align:middle;
-ms-touch-action:manipulation;
touch-action:manipulation;
cursor:pointer;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
background-image:none;
border:1px solid transparent;
border-radius:3px;
padding:6px 12px;
}
p{
background:#444;
color:#4ee255;
padding:10px;
margin:10px 0px;
border:2px solid #fa4b2a;
border-radius:10px;
box-shadow:4px 4px 4px #ccc;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="logo.png">
<title>Create notes</title>
<link href="css/style1.css" rel="stylesheet" type="text/css">
<link href="css/style3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<div class="header" id="header">
<div class="logo"> <img src = "logo.png" alt = "logo" name = "logo" id = "logo"> </div>
</div>
<div class="navigation" id="nav">
<ul>
<li><span>Home</span></li>
<li><a href="notes.html" class='active'><span>Notes</span></a></li>
<li><span>Exams</span></li>
</ul>
</div>
<div class="noteTitle">
<label class="control-label col-sm-2" for="email">Title:</label>
<div class="col-sm-10">
<input type="text" name="title" class="form-control" id="titleofnote" value="Note 1" placeholder="Click here to enter title.">
</div>
<span class="glyphicon glyphicon-floppy-save"></span> Save and close
</div>
<div class="DemoBS2">
<!-- Toogle Buttons -->
<button type="button" class="btn btn-warning"
data-toggle="collapse" data-target="#toggle-example">Terms</button>
<button type="button" class="btn btn-warning"
data-toggle="collapse" data-target="#toggle-example">Enumerations</button>
<div id="toggle-example" class="collapse in">
<p>I don't know how to hide this. This should only show</b>
when the button is clicked in terms(button)</b>Please help thanks.</p></div>
</div>
</div>
</body>
<script type="text/javascript" src="Scripts/createscript.js"></script>
</html>

Firstly you need to hide in css as:
#toggle-example p{display:none;}
and in jquery on click on Terms button, you need to toggle as:
$('#toggle-example p').toggle();

$(".btn1").click(function() {
$("#toggle-example").fadeToggle();
})
#charset "utf-8";
body {
width: 960px;
overflow-x: hidden;
}
}
html,
body {
height: 100%;
}
#toggle-example {
display: none
}
body {
margin: 0px;
padding: 0px;
background: #ffffff;
font-family: 'Raleway', sans-serif;
font-size: 11pt;
font-weight: 400;
color: #363636;
}
a {
text-decoration: none
}
.wrapper {
text-align: center;
width: 100%;
position: absolute;
}
.header {
background-color: #ffffff;
}
.header img {
width: 360px;
}
#nav {
background-color: black;
width: 100%;
font-size: 1em;
border-top-width: medium;
border-top-style: groove;
border-bottom-style: groove;
border-bottom-width: medium;
}
#nav a {
letter-spacing: 1px;
}
#nav ul {
list-style: none;
display: block;
font-size: larger;
}
#nav ul li {
display: inline-block;
}
#nav ul {
text-align: center;
}
#nav ul li a {
color: #ffffff;
text-decoration: none;
display: block;
padding-top: 10px;
padding-right: 15px;
padding-left: 15px;
padding-bottom: 10px;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
text-transform: uppercase;
position: relative;
}
#nav ul li a:hover {
color: #fff;
}
#cssmenu ul li a:hover:before {
width: 100%;
}
#nav ul li a.active {
text-decoration: underline;
color: #EDF0BA;
}
div.navigation li {
list-style: none;
}
div.navigation li:hover {
background: #555;
}
div.navigation li:hover ul {
display: block;
}
.how,
.about {
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
margin-left: 10%;
margin-right: 10%;
background-color: white;
text-align: left;
color: black;
}
.sectiontitle {
text-align: center;
color: black;
text-shadow: 1px 1px 2px #767676;
}
.footer {
background-color: black;
width: 100%;
border-style: groove hidden hidden;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
padding-top: 1%;
padding-bottom: 1%;
font-size: 1em;
color: #FFFFFF;
font-variant: small-caps;
vertical-align: middle;
}
.addnotes {
float: left;
padding-left: 2%;
font-color: black;
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon-trash:before {
content: "\e020";
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.btn-sm,
{
padding: 5px 10px;
font-size: 12px;
line-height: 1px;
border-radius: 3px;
}
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc
}
.listnotes {
margin: 0;
padding: 0;
list-style-type: none;
}
.listnotes li {
background: url('noteicon.png') no-repeat;
width: 220px;
height: 135px;
margin-left: 45%;
padding-top: 5%;
margin-bottom: 10px;
}
.noteTitle {
float: left;
left: 0%;
left: 0%;
color: black;
}
.buttons {
margin-top: 100px;
color: black;
}
.createcontent {
float: right;
padding-right: 25%;
width: 50%;
margin: 0 auto;
}
.definition {
padding-top: 10%;
}
.enumeration {
padding-top: 15%;
}
#titletextbox {
background: transparent;
border: none;
width: 100%;
}
#media screen and (max-width: 320px) {
.wrapper {
width: 320px;
}
#nav {
background-color: black;
width: 100%;
font-size: 10px;
border-top-width: thin;
border-top-style: thin;
border-bottom-style: thin;
border-bottom-width: thin;
}
#logo {
margin-top: 5px;
width: 50%;
}
.footer {
background-color: black;
width: 100%;
border-style: groove hidden hidden;
padding-bottom: 1%;
color: #FFFFFF;
font-variant: small-caps;
vertical-align: middle;
}
.listnotes li {
background: url('noteicon.png') no-repeat;
width: 100;
height: 100;
margin-left: 35%;
padding-top: 5%;
margin-bottom: 10px;
}
.createcontent {
font-size: 14px;
}
.listnotes {
font-size: 14px;
}
a {
text-decoration: none
}
}
#font-face {
font-family:'Glyphicons Halflings';
src:url(../fonts/glyphicons-halflings-regular.eot?#iefix) format(embedded-opentype),
url(../fonts/glyphicons-halflings-regular.woff2) format(woff2),
url(../fonts/glyphicons-halflings-regular.woff) format(woff),
url(../fonts/glyphicons-halflings-regular.ttf) format(truetype),
url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format(svg);
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon-plus:before {
content: "\2b";
}
.glyphicon-remove:before {
content: "\e014";
}
.glyphicon-trash:before {
content: "\e020";
}
.glyphicon-floppy-save:before {
content: "\e175";
}
.btn {
display: inline-block;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 3px;
padding: 6px 12px;
}
.btn.focus,
.btn:focus,
.btn:hover {
color: #333;
text-decoration: none;
}
.btn.active,
.btn:active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn-default {
margin-top: 10px;
color: #333;
background-color: #fff;
border-color: #ccc;
}
.btn-default.active,
.btn-default.focus,
.btn-default:active,
.btn-default:focus,
.btn-default:hover,
.open>.dropdown-toggle.btn-default {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
}
.btn-primary {
color: #fff;
margin-left: -50px;
background-color: #337ab7;
border-color: #2e6da4;
margin-top: 10px;
}
.btn-primary1 {
color: #fff;
margin-left: -10px;
background-color: #337ab7;
border-color: #2e6da4;
margin-top: 10px;
margin-left: 20px;
}
.form-control {
width: 100%;
height: 20px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
padding: 6px 12px;
}
.col-sm-2 {
width: 20%;
float: left;
font-size: 20px;
margin-top: 20px;
}
.col-sm-10 {
width: 80%;
float: left;
margin-top: 20px;
}
.DemoBS2 {
margin-top: 110px;
margin-left: 40px;
display: block;
margin-bottom: 0;
font-size: 14px;
text-align: left;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 3px;
padding: 6px 12px;
}
p {
background: #444;
color: #4ee255;
padding: 10px;
margin: 10px 0px;
border: 2px solid #fa4b2a;
border-radius: 10px;
box-shadow: 4px 4px 4px #ccc;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="logo.png">
<title>Create notes</title>
<link href="css/style1.css" rel="stylesheet" type="text/css">
<link href="css/style3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<div class="header" id="header">
<div class="logo">
<img src="logo.png" alt="logo" name="logo" id="logo">
</div>
</div>
<div class="navigation" id="nav">
<ul>
<li><span>Home</span>
</li>
<li><a href="notes.html" class='active'><span>Notes</span></a>
</li>
<li><span>Exams</span>
</li>
</ul>
</div>
<div class="noteTitle">
<label class="control-label col-sm-2" for="email">Title:</label>
<div class="col-sm-10">
<input type="text" name="title" class="form-control" id="titleofnote" value="Note 1" placeholder="Click here to enter title.">
</div>
<span class="glyphicon glyphicon-floppy-save"></span> Save and close
</div>
<div class="DemoBS2">
<!-- Toogle Buttons -->
<button type="button" class="btn btn-warning btn1" data-toggle="collapse" data-target="#toggle-example">Terms</button>
<button type="button" class="btn btn-warning btn2" data-toggle="collapse" data-target="#toggle-example">Enumerations</button>
<div id="toggle-example" class="collapse in">
<p>I don't know how to hide this. This should only show</b>
when the button is clicked in terms(button)</b>Please help thanks.</p>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="Scripts/createscript.js"></script>
</html>

How to get submenu to appear below main menu

Menu
NOTE: you may need to expand the Result Box
above is what i am trying to fix, the idea is that when you hover the Men and Women <li> elements a submenu appears below, this is why the hidden div is inside the <li> because then when you leave the link to go into the div it's not going to disappear. however my problem is that the other menu items are being pushed down.
Now before i did have it working, this is what i had
Old Version
however i was requested to push the first 3 links to the left and the last link to the right. all i did was add floats which seem to be the cause. i have tried changing the display property, I've tried changing the position property however the only other result i get that the sub menu sets on the end and not under the menu.
I've about ran out of idea except for getting the x and y coordinates and using css to force the div to sit there however i don't think it'll work unless it's outside the <li>, What else can i do to get my submenu to work correctly while keeping the menu alignment as it is

Is this the result you wanted to achieve? I've added my CSS at the end, for the floating of the "Cart" entry, I added an ID (cart) to cart <li> element.
JSFiddle
Here is a snippet.
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
/* ie 6/7 */
}
/* Actual CSS */
#copyright {
text-align: center;
margin: 0px auto;
font-size: 10px;
}
#container {
width: 930px;
margin: 0px auto;
}
#navbar {
border-top: 1px solid #686868;
border-bottom: 1px solid #686868;
/*padding: 5px;*/
}
/* Hero Footer List */
#herofooter ul li a {
padding: 1em 2.5em;
text-decoration: none;
float: left;
text-align: center;
}
#byline {
background: #7D787D;
text-align: center;
color: white;
margin-top: 12px;
margin-bottom: 12px;
padding: 5px;
}
#herofooter ul li a {
background-repeat: no-repeat;
/*background-position:0.2em;*/
background-position: left center;
}
.shipping a {
/* width: 200px; */
}
#herocontainer {
clear: both;
margin: 0;
padding: 0;
padding-bottom: 10px;
border-top: 1px solid #686868;
border-bottom: 1px solid #686868;
}
.contactus a {
background-image: url('/Pics/13901.png');
}
.store a {
background-image: url('/Pics/13895.png');
}
.shipping a {
background-image: url('/Pics/13905.png');
}
.returns a {
background-image: url('/Pics/13909.png');
}
.store a {
padding-left: 27px !important;
}
.shipping a {
padding-left: 47px !important;
}
.secure a {
background-image: url('/Pics/NortonVerisign-sml.png');
padding-left: 75px !important;
padding-top: .2em !important;
}
.loyaltyprogram a {
background-image: url('/Pics/LoyaltyProgramIcon.png');
padding-left: 23px !important;
padding-top: .2em !important;
}
#herofooter ul li a:hover,
#footernav li a:hover {
/* background-color: #efefef;*/
color: #341414;
}
#herofooter ul li a,
#footernav a {
color: #686868;
}
/* Footer extra buttons */
#footermenu {
width: 800px;
text-align: center;
margin: 0px auto;
}
#footernav li {
font-size: 12px;
}
#footernav li a {
padding: 0.1em 2.5em;
text-decoration: none;
}
/* Font replacements */
#headernav {
font-family: 'Oswald', 'Verdana';
font-size: 20px;
}
#logotext {
font-family: 'Raleway', Verdana;
font-weight: 800;
font-size: 88px;
color: #000;
}
#search {
font-family: 'Oswald', Verdana;
font-weight: 400;
font-size: 18px;
color: #000;
}
#herofooter {
font-family: 'Raleway', Arial;
font-size: 14px;
font-weight: 500;
}
#copyright {
font-family: 'Raleway';
font-size: 10px;
font-weight: 300;
}
#byline {
font-family: 'Playfair Display', 'verdana';
font-weight: 400;
font-size: 24px;
}
#herofooter ul li a {
color #000 !important;
}
/* Hovers and animations */
#headernav a {
transition: background-color .25s ease;
-webkit-transition: background-color .25s ease;
-moz-transition: background-color .25s ease;
-o-transition: background-color .25s ease;
}
#headernav a:hover {
color: #CC3333;
color: #FFFFFF;
}
/* Sale, logo colour */
#headernav a {
color: #000000;
}
a#sale,
#logo {
color: #CC0001;
}
#logo a img {
border: 0;
}
/* Search */
#search {
width: 185px;
text-align: center;
margin-right: 25px;
display: block;
float: right;
margin-top: 15px;
}
#stylesearch {
border: 1px solid black;
padding: 0;
margin: 0;
width: 190px;
padding-top: 2px;
line-height: 22px;
}
#productsearch {
padding-left: 5px;
padding-right: 5px;
}
#searchbox {
border: 0;
border-right: 1px solid #686868;
margin-right: 2px;
margin-bottom: 1px;
margin-top: 1px;
padding: 5px;
width: 140px;
float: left;
}
#searchbox:focus,
#searchbox:hover {
background: #FDFDFD;
color: #000;
}
/* Header lists */
#navbar ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
text-decoration: none;
padding: 0 1.5em;
/*padding: 0 2em;*/
/*float: left;*/
}
#mycart {
float: right;
}
#navbar ul li a:hover {
background-color: #7D787D;
border-top: 1px solid #CC0001;
}
/* nav me */
.navme ul li {
display: inline;
}
.navme ul li a {
text-decoration: none;
}
#memberprogram p {
/* margin: 0; */
}
#footermenu {
text-align: left;
}
#footernav li {
display: inline-block;
width: 145px;
}
.cartimage {
vertical-align: middle;
margin-top: -7px;
border-style: none
}
.navbuttons {
min-height: 30px;
}
.mega-menu {
float: left;
z-index: 1000;
position: inherit;
text-align: left;
background: #aaaaaa;
}
/*--------Added CSS---------*/
.mega-menu {
position: absolute;
left: 0;
top: 100%;
width: 500px;
}
#navbar ul li {
position: relative;
float: left;
}
#navbar ul ul li {
float: none;
}
#navbar ul ul li a {
padding: 0 15px 0 15px;
}
#navbar ul li:hover > ul {
display: block;
}
#navbar ul li#cart {
float: right;
}
li.header {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
function showMenu(heading) {
$(heading).find("div[class='mega-menu']").css({
display: "block"
})
}
function hideMenu(heading) {
$(heading).find("div[class='mega-menu']").css({
display: "none"
})
}
</script>
<div id="navbar" class="navbuttons">
<ul id="headernav">
<li>New Arrivals
</li>
<li onmouseover="showMenu(this)" onmouseout="hideMenu(this)">Men
<div id="mens-cat" name="mens-cat" class="mega-menu" style="display: none; margin-top: -1px;">
<div id="category" class="clearfix">
<div id="categorycontent" class="clearfix">
<ul class="clothing category">
<li class="header">
<h4>Clothing</h4>
</li>
<ul class="items">
<li> Activewear
</li>
<li> Business Shirts
</li>
<li> Coats and Jackets
</li>
</ul>
</ul>
</div>
</div>
</div>
</li>
<li onmouseover="showMenu(this)" onmouseout="hideMenu(this)">Women
<div id="womens-cat" name="womens-cat" class="mega-menu" style="display: none;">
<div id="category" class="clearfix">
<div id="categorycontent" class="clearfix">
<ul class="clothing category">
<li class="header">
<h4>Clothing</h4>
</li>
<ul class="items">
<li> Basic Tops
</li>
<!-- <li>Cathouse Suits</li>-->
<li> Fashion Tops
</li>
<li> Jackets
</li>
</ul>
</ul>
</div>
</div>
</div>
</li>
<li id="cart">My Cart
</li>
</ul>
</div>

see the jsfiddle code : http://jsfiddle.net/sbaxe5m3/2/
add this css:
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1; /* ie 6/7 */
}
/* Actual CSS */
#copyright { text-align:center; margin:0px auto; font-size:10px; }
#container {
width: 930px;
margin:0px auto;
}
#navbar {
border-top: 1px solid #686868;
border-bottom: 1px solid #686868;
/*padding: 5px;*/
}
/* Hero Footer List */
#herofooter ul li a {
padding: 1em 2.5em;
text-decoration: none;
float:left;
text-align:center;
}
#byline {
background: #7D787D;
text-align:center;
color: white;
margin-top:12px;
margin-bottom:12px;
padding:5px;
}
#herofooter ul li a {
background-repeat: no-repeat;
/*background-position:0.2em;*/
background-position: left center;
}
.shipping a {
/* width: 200px; */
}
#herocontainer {
clear:both;
margin:0;
padding:0;
padding-bottom: 10px;
border-top: 1px solid #686868;
border-bottom: 1px solid #686868;
}
.contactus a {
background-image: url('/Pics/13901.png');
}
.store a {
background-image: url('/Pics/13895.png');
}
.shipping a {
background-image: url('/Pics/13905.png');
}
.returns a {
background-image: url('/Pics/13909.png');
}
.store a {
padding-left:27px !important;
}
.shipping a {
padding-left:47px !important;
}
.secure a {
background-image: url('/Pics/NortonVerisign-sml.png');
padding-left:75px !important;
padding-top:.2em !important;
}
.loyaltyprogram a {
background-image: url('/Pics/LoyaltyProgramIcon.png');
padding-left:23px !important;
padding-top:.2em !important;
}
#herofooter ul li a:hover, #footernav li a:hover {
/* background-color: #efefef;*/
color: #341414;
}
#herofooter ul li a, #footernav a {
color: #686868;
}
/* Footer extra buttons */
#footermenu { width: 800px; text-align:center; margin: 0px auto;}
#footernav li { font-size:12px; }
#footernav li a {
padding: 0.1em 2.5em;
text-decoration: none;
}
/* Font replacements */
#headernav {
font-family: 'Oswald', 'Verdana';
font-size: 20px;
}
#logotext {
font-family: 'Raleway', Verdana;
font-weight: 800;
font-size: 88px;
color:#000;
}
#search {
font-family: 'Oswald', Verdana;
font-weight: 400;
font-size: 18px;
color:#000;
}
#herofooter {
font-family: 'Raleway', Arial;
font-size: 14px;
font-weight: 500;
}
#copyright {
font-family: 'Raleway';
font-size: 10px;
font-weight: 300;
}
#byline {
font-family: 'Playfair Display', 'verdana';
font-weight: 400;
font-size: 24px;
}
#herofooter ul li a {
color #000 !important;
}
/* Hovers and animations */
#headernav a {
transition: background-color .25s ease;
-webkit-transition: background-color .25s ease;
-moz-transition: background-color .25s ease;
-o-transition: background-color .25s ease;
}
#headernav a:hover {
color:#CC3333 ;
color:#FFFFFF ;
}
/* Sale, logo colour */
#headernav a {
color: #000000;
}
a#sale, #logo {
color: #CC0001;
}
#logo a img {
border: 0;
}
/* Search */
#search {
width: 185px;
text-align:center;
margin-right:25px;
display:block;
float:right;
margin-top:15px;
}
#stylesearch {
border:1px solid black;
padding:0;
margin:0;
width:190px;
padding-top:2px;
line-height:22px;
}
#productsearch {
padding-left:5px;
padding-right:5px;
}
#searchbox {
border:0;
border-right:1px solid #686868;
margin-right:2px;
margin-bottom:1px;
margin-top:1px;
padding:5px;
width:140px;
float: left;
}
#searchbox:focus, #searchbox:hover {
background: #FDFDFD;
color:#000;
}
/* Header lists */
#navbar ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navbar ul li { display: inline; }
#navbar ul li a {
text-decoration: none;
padding: 0 1.5em; /*padding: 0 2em;*/
/*float: left;*/
}
#mycart {
}
#navbar ul li a:hover {
background-color: #7D787D;
border-top:1px solid #CC0001;
}
/* nav me */
.navme ul li { display: inline; }
.navme ul li a {
text-decoration: none;
}
#memberprogram p
{
/* margin: 0; */
}
#footermenu { text-align:left; }
#footernav li { display: inline-block; width: 145px; }
.cartimage
{
vertical-align: middle;
margin-top: -7px;
border-style:none
}
.navbuttons
{
min-height:30px;
}
#navbar ul li {
display: inline;
line-height: 30px;
position: relative;
}
.mega-menu
{
float: left;
z-index:1000;
position: inherit;
text-align:left;
background:#aaaaaa; left: 50%;
margin-left: -327px;
position: absolute;
top: 27px;
width: 654px;
}

We Keep Coding

JavaScript is the programming language of the Web.

jQuery menu not hidden completely - javascript

Add box-sizing: border-box to the lightbox CSS rule, otherwise the 35% top padding it has are added to the * height: 0* in the "hidden" state.

Related

Add to the drop-down list the ability to select an element

close and open menu on click in mobile view is not working?

How to make an element remain active when click on other element?

How to hide the information, just only show when button is clicked html, css. javascript?

How to get submenu to appear below main menu

Categories

Resources