Responsive collapsible sidebar using bootstrap

Responsive collapsible sidebar using bootstrap - javascript

I want to build a sidebar like W3 Schools website. For example if the screen max-width will 456px then sidebar will be hide and a menu icon would display. On click of menu icon sidebar will open.
enter image description here
Here is my code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: arial;
}
/* body{
width: 100%;
min-height: 100vh;
} */
.navbar {
top: 0px;
left: 20px;
position: fixed;
width: 250px;
height: 100%;
background: #FFFFFF;
}
.navbar-brand {
float: left;
text-decoration: none;
font-size: 19px;
padding: 0.2em 0.7em;
color: white
}
.navbar .navbar-nav .nav-item {
display: inline;
}
.navbar .livestock-logo {
background: white;
margin-left: auto;
margin-right: auto;
margin-top: 1px;
width: 60%;
}
.navbar ul li:hover {
background: #3f612e;
border-bottom-left-radius: 10px !important;
border-bottom-right-radius: 10px !important;
border-top-left-radius: 10px !important;
border-top-right-radius: 10px !important
}
.navbar ul {
display: flex;
flex-direction: column;
margin: 0;
padding: 20px;
}
.navbar ul li {
display: flex;
left: 10px;
padding: 10px;
border-top: 1px solid rgb(235, 232, 232);
}
.navbar ul li a {
text-align: left;
padding-left: 25px;
font-size: 0.8em !important;
color: #000000;
display: block
}
.navbar ul li a .fas {
width: 20px !important
}
.navbar ul li a .far {
width: 20px !important
}
.navbar-nav .nav-item a {
text-decoration: none;
display: inline-block;
font-size: 14px;
}
.navbar ul li a:hover {
color: #fff;
text-decoration: none
}
.toggle-collapse {
float: left;
width: 45px;
height: 32px;
background-color: transparent;
/* color: white; */
border: 1px solid blue;
border-radius: 3px;
cursor: pointer;
display: none;
}
toggle-collapse:hover {
color: white
}
#media screen and (max-width:456px) {
.navbar-brand {
display: inline-block;
float: none;
}
.toggle-collapse {
display: inline-block;
}
.navbar-nav {
color: white;
padding: 0%;
}
.navbar .navbar-nav .nav-item {
display: block;
list-style: none;
}
.navbar-collapse {
width: 100%;
overflow: hidden;
text-align: left;
height: 0vh;
transition: all 499ms ease;
}
.collapse {
height: 100vh;
}
}
<!DOCTYPE html>
<html lang="en">
<style type="text/css">
body {
background: rgb(247, 247, 247) !important;
}
</style>
<head>
<meta charset="UTF-8"> {% load static %}
<meta name="viewport" content="device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../static/css/style.css" />
<link rel="stylesheet" type="text/css" href="../static/css/responsive.css" />
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<!-- <div>
<button class="toggle-collapse">
<img src="../static/images/toggle.png">
</button>
</div> -->
<nav>
<div class="navbar">
<button class="toggle-collapse">
<img src="../static/images/toggle.png">
</button>
<div class="navbar-collapse">
<div class="livestock-logo">
<img src="../static/images/livestock.png" alt="livestock">
</div>
<ul class="navbar-nav">
<li class="nav-item">
<img src="../static/images/home.png"> Home
</li>
<li class="nav-item">
<img src="../static/images/home.png"> Index
</li>
<li class="nav-item">
<img src="../static/images/home.png"> Users
</li>
<li class="nav-item">
<img src="../static/images/home.png"> Companies
</li>
<li class="nav-item">
<img src="../static/images/home.png"> Logout
</li>
<li class="nav-item">
<img src="../static/images/search.png"> Search
</li>
</ul>
</div>
</div>
</nav>
</body>
<script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../static/js/jquery.js"></script>
<script src="https://cdnjs.cloudfare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.toggle-collapse').click(function() {
$('.navbar-collapse').toggleClass("collapse");
})
})
</script>
</html>
I am unable to remove the white navbar.
Any help will be highly appriciated.

Related

Dropdown nav on another bar

I want to add dropdown to my current nav bar. I tried this code but dropdown content disappeared and now I don´t have any ideas to edit code to this be working. I tried some edits but isn´t do with dropdown. Dropdown, dropbtn was added to previous code. Can you help me with this? Thanks very much!
Here is code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="shortcut icon" type="image/x-icon" href="menu.png" />
<title>MENU | Úvodné menu</title>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
body {
height: 100%;
background-image: linear-gradient(orange, red);
}
</style>
<style>
body,h1 {font-family: "Raleway", sans-serif}
body, html {height: 100%}
.bgimg {
background-image: linear-gradient(orange, red);
min-height: 100%;
background-position: full;
background-size: ;
}
</style>
<style>
* {box-sizing: border-box;}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.header {
overflow: hidden;
background-color: orange;
padding: 20px 10px;
}
.header a {
float: left;
color: white;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header a.active {
background-color: red;
color: white;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown:hover .dropdown-content {
display: block;
}
tyle>
</head>
<body onload="startTime()">
<div class="header">
<a id="txt" hidden></a>
<img src="https://i.ibb.co/6Nkbdb3/dlhemenu-1-1-1.png" class="logo" title="Odhlásiť sa" alt="MENU logo" width="150" height="50" onclick="window.location='/logout.php'">
&nbsp
<a class="dropbtn"><i class="fa fa-user">&nbsp</i>Dropdown
<i class="fa fa-caret-down"></i>
</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
<div class="header-right">
<a class="active" href="/welcome.php">Úvodné menu</a>
Online hodiny
Testy na vyplnenie
Známky
Rozvrh hodín
Dochádzka
Učebný materiál
Hry
O mne
</div>
</div>

add hover css to display the drop-down content
.dropbtn:hover ~ .dropdown-content {display: block;}

my website is ok on iphone 6/7/8 but messes up on others, how do i fix

i have used media queries to make my website suitable for iphone /6/7/8 but when i change it to iphone x in dev tools, there is some black space in the right side and the same with other devices, how do i make my website suitable for all devices, what queries do i use and what am i doing wrong?
var navLinks = document.getElementById("navLinks");
function showMenu() {
navLinks.style.right = "0";
}
function hideMenu() {
navLinks.style.right = "-400px";
}
/* MEDIA CSS */
#media screen and (max -width: 700px) {
.nav-links ul li {
display: block;
}
.nav-links {
position: fixed;
background: #ffd700;
height: 100vh;
width: 12.5em;
top: 0;
right: -200px;
text-align: left;
z-index: 2;
}
nav .fas {
display: block;
color: black;
margin: 1.625em;
font-size: 1.375em;
cursor: pointer;
position: relative;
right: 0.6em;
}
.nav-links ul {
padding: 1em;
}
.text-box h1 {
font-size: 4.3em;
}
nav img {
width: 20em;
position: relative;
top: 0.1em;
}
.player-info p {
padding-left: 0;
font-size: 0.8em;
padding-top: 0;
}
}
/* NORMAL CSS */
* {
margin: 0;
padding: 0;
font-family: "Nunito", sans-serif;
}
#font-face {
font-family: "BatmanForeverOutline";
font-style: normal;
font-weight: normal;
src: local("BatmanForeverOutline"), url("batmfo__.woff") format("woff");
}
#font-face {
font-family: "BatmanForeverAlternate";
font-style: normal;
font-weight: normal;
src: local("BatmanForeverAlternate"), url("batmfa__.woff") format("woff");
}
body {
background-color: black;
width: 100%;
}
em {
color: #ffd700;
font-style: normal;
font-family: "Nunito", sans-serif;
}
.header {
min-height: 100vh;
min-width: 200px;
background-image: linear-gradient(
rgba(105, 105, 105, 0.7),
rgba(105, 105, 105, 0.7)
);
background-position: center;
background-size: cover;
position: relative;
}
.main-texts {
min-height: 85vh;
background-image: url(images/background.jpeg);
background-position: center;
background-size: cover;
position: relative;
border-bottom: 0.1875em solid #ffd700;
}
.menu-header {
width: 100%;
background-color: #ffd700;
min-height: 15vh;
border-bottom: 0.1875em solid #fff;
}
nav img {
width: 25em;
}
nav {
display: flex;
padding: 2% 1%;
justify-content: space-between;
align-items: center;
}
.nav-links {
flex: 1;
text-align: center;
position: relative;
right: 12.5em;
}
.nav-links ul li {
list-style: none;
display: inline-block;
padding: 0.5em 3.125em;
position: relative;
}
.nav-links ul li a {
color: rgb(105, 105, 105);
text-decoration: none;
font-size: 1.375em;
transition: 0.5s;
}
.nav-links ul li::after {
content: "";
width: 0%;
height: 0.1875em;
background: white;
display: block;
margin: auto;
transition: 0.5s;
position: relative;
bottom: 0.1875em;
}
.nav-links ul li:hover::after {
width: 100%;
}
.nav-links ul li a:hover {
color: white;
}
.text-box {
color: #fff;
width: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.text-box h1 {
font-size: 5.625em;
font-family: "Nunito", sans-serif;
}
.text-box p {
margin: 0.625em 0 2.5em;
font-size: 1.5625em;
color: #fff;
}
.player-info {
margin: 0.625em 0 2.5em;
font-size: 1.5625em;
color: #fff;
}
.hero-btn {
display: inline-block;
text-decoration: none;
color: #fff;
border: 0.0625em solid #fff;
padding: 0.5em 1.25em;
font-size: 1.125em;
background: transparent;
border-radius: 0.1875em;
position: relative;
cursor: pointer;
}
.hero-btn:hover {
border: 0.0625em solid #fff;
background: #ffd700;
transition: 0.5s;
border-radius: 0.3125em;
}
nav .fas {
display: none;
}
.meet-me {
width: 80%;
text-align: center;
margin: auto;
padding-top: 6.25em;
}
.meet-me h1 {
font-size: 2.25em;
font-weight: 600;
color: #fff;
padding-bottom: 1.875em;
}
.meet-me p {
text-align: left;
padding-left: 9.375em;
}
footer {
width: 100%;
background-color: black;
height: 20.625em;
border-top: 0.3125em solid #fff;
}
.footer-headers {
text-align: center;
padding-top: 1.25em;
padding-bottom: 1.25em;
}
.footer-headers ul li {
list-style: none;
display: inline-block;
padding: 1.25em 5em;
position: relative;
}
.footer-headers ul li a {
text-decoration: none;
color: #ffd700;
font-size: 1.125em;
transition: 0.5s;
}
.footer-headers ul li a::after {
content: "";
width: 0%;
height: 0.1875em;
background: white;
display: block;
margin: auto;
transition: 0.5s;
position: relative;
bottom: 0.1875em;
}
.footer-headers ul li a:hover::after {
width: 100%;
}
.foot-logo img {
width: 25em;
padding-top: 0.0625em;
position: relative;
right: 1.875em;
}
.foot-logo {
text-align: center;
}
.copyright h4 {
color: #ffd700;
position: relative;
top: 0.625em;
}
.copyright {
text-align: center;
position: relative;
top: 2.5em;
}
.copyright h4 a {
text-decoration: none;
color: #ffd700;
transition: 0.5s;
}
.copyright h4 a:hover {
color: red;
}
.socials a i {
color: #ffd700;
transition: 0.5s;
}
.socials a i:hover {
color: red;
}
.socials {
text-align: center;
position: relative;
top: 1.5625em;
}
.socials i {
padding: 0.3125em 2.5em;
}
<html lang="en">
<head>
<script>
ScrollReveal({ reset: true });
</script>
<script src="https://unpkg.com/scrollreveal"></script>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home | LuxxMob</title>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Teko:wght#400;500;700&display=swap"
rel="stylesheet"
/>
<script
src="https://kit.fontawesome.com/360332bae9.js"
crossorigin="anonymous"
></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Nunito:wght#200;400;700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<section class="header">
<div class="menu-header">
<nav>
<img src="images/HD_FILE (2).png" />
<div class="nav-links" id="navLinks">
<i class="fas fa-times" onclick="hideMenu()"></i>
<ul>
<li>
Home
</li>
<li>
News
</li>
<li>
Players
</li>
<li>
Partners
</li>
<li>
About Us
</li>
</ul>
</div>
<i class="fas fa-bars" onclick="showMenu()"></i>
</nav>
</div>
<div class="main-texts">
<div class="text-box">
<h1>Welcome To <em>LuxxMob</em></h1>
<p>An upcoming eSports team recruiting talented gamers and quality content creators.</p>
About Us
</div>
</div>
</section>
<!--NEXT SECTION MEET THE OWNER-->
<section class="meet-me">
<h1>Meet The Players</h1>
<div class="player-info">
<p>
Meet the competitive players, content creators and the owner of
LuxxMob. A rapidly growing team of highly skilled members, providing
some of the best content and gameplay available on social media
currently.
</p>
</div>
</section>
<!--FOOTER SECTION-->
<footer>
<div class="footer-headers">
<ul>
<li>
Home
</li>
<li>
News
</li>
<li>
Players
</li>
<li>
Partners
</li>
<li>
About Us
</li>
</ul>
</div>
<div class="foot-logo">
<img src="images/HD_FILE (2).png" />
</div>
<div class="socials">
<i class="fab fa-tiktok"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
<div class="copyright">
<h4>&copy 2021 LuxxMob</h4>
<h4>Made with &#10084 by #truechow</h4>
</div>
</footer>

As I can see in your code, you have only used one media query, so try to add media queries by considering all sizes of devices. Please find below media queries:
#media screen and (min-width: 320px) and (max-width: 576px) {
}
#media screen and (min-width: 577px) and (max-width: 767px) {
}
#media screen and (min-width: 768px) and (max-width: 991px) {
}
#media screen and (min-width: 992px) and (max-width: 1055px) {
}
#media screen and (min-width: 992px) and (max-width: 1200px) {
}
#media screen and (min-width: 1201px) and (max-width: 1400px) {
}

CSS overflow : hidden may be helpful for you.

SideBar navigation collapse shows blank screen when bootstrap 4 css loaded

I am trying to do side navigation bar with collapse. so that I have included jquery 3.4.1 and CSS. But When Bootstrap 4 css and Bootstrap js added page turns into white screen. In console there will be no error. After removing bootstrap it is working fine.But bootstrap is essential. So that JS, CSS, JSP has been included for your reference. Please help me in this.
$(document).ready(function(){
$(".hamburger").click(function(){
$(".wrapper").toggleClass("collapse");
});
});
#import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700&display=swap');
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}
body{
background: #e1ecf2;
}
.wrapper{
margin: 10px;
}
.wrapper .top_navbar{
width:84%;
height: 60px;
display: flex;
position: fixed;
top: 10px;
transition: all 0.3s ease;
}
.wrapper.collapse .top_navbar{
width: 92.5%;
height: 60px;
display: flex;
position: fixed;
top: 10px;
}
.wrapper .top_navbar .hamburger{
width: 70px;
height: 100%;
background: #33AAAA;
padding: 25px 25px;
/* border-top-left-radius: 20px; */
cursor: pointer;
}
.wrapper . .hamburger div{
width: 35px;
height: 4px;
background: #92a6e2;
margin: 5px 0;
border-radius: 5px;
}
.wrapper .top_navbar .top_menu{
width: 100%;
height: 100%;
background: linear-gradient(to right,#33AAAA,#80C477);
/* border-top-right-radius: 20px; */
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.wrapper .top_navbar .top_menu .logo{
color: white;
font-size: 20px;
font-weight: 700;
letter-spacing: 3px;
}
.wrapper .top_navbar .top_menu ul{
display: flex;
}
.wrapper .top_navbar .top_menu ul li a{
display: block;
margin: 0 10px;
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
border: 1px solid white;
border-radius: 50%;
color: white;
}
.wrapper .top_navbar .top_menu ul li a:hover{
background: #4360b5;
color: #fff;
}
.wrapper .top_navbar .top_menu ul li a:hover i{
color: #fff;
}
.wrapper .sidebar{
position: fixed;
left: 10px;
background: linear-gradient(#80C477,#33AAAA);;
width: 200px;
height: calc(100% - 20px);
/* border-bottom-left-radius: 20px; */
transition: all 0.3s ease;
margin-top: -60px
}
.wrapper .sidebar ul li a{
display: block;
padding: 20px;
color: #fff;
position: relative;
margin-bottom: 1px;
color: white;
white-space: nowrap;
}
.wrapper .sidebar ul li a:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background: #92a6e2;
display: none;
}
.wrapper .sidebar ul li a span.icon{
margin-right: 10px;
display: inline-block;
}
.wrapper .sidebar ul li a span.title{
display: inline-block;
}
.wrapper .sidebar ul li a:hover,
.wrapper .sidebar ul li a.active{
background: #4360b5;
color: #fff;
}
.wrapper .sidebar ul li a:hover:before,
.wrapper .sidebar ul li a.active:before{
display: block;
}
.wrapper .main_container{
width: (100% - 200px);
margin-top: 70px;
margin-left: 200px;
padding: 15px;
transition: all 0.3s ease;
}
.wrapper .main_container .item{
background: #fff;
margin-bottom: 10px;
padding: 15px;
font-size: 14px;
line-height: 22px;
}
.wrapper.collapse .sidebar{
width: 70px;
}
.wrapper.collapse .sidebar ul li a{
text-align: center;
}
.wrapper.collapse .sidebar ul li a span.icon{
margin: 0;
}
.wrapper.collapse .sidebar ul li a span.title{
display: none;
}
.wrapper.collapse .main_container{
width: (100% - 70px);
margin-left: 70px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive Side Navigation Bar</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="../css/Side.css">
<script src="../Scripts/fontawsome.js"></script>
<link rel="stylesheet" href="../css/dataTables.min.css">
<script type="text/javascript" src="../Scripts/dataTables.min.js"></script>
</head>
<body>
<div class="wrapper">
<div class="sidebar" >
<ul>
<li>
<li>
<li><a href="#"> <span class="icon"><i
class="fas fa-book"></i></span> <span class="title">Books</span></a></li>
<li><a href="#"> <span class="icon"><i
class="fas fa-file-video"></i></span> <span class="title">Movies</span>
</a></li>
<li><a href="#"> <span class="icon"><i
class="fas fa-volleyball-ball"></i></span> <span class="title">Sports</span>
</a></li>
<li><a href="#" class="active"> <span class="icon"><i
class="fas fa-blog"></i></span> <span class="title">Blogs</span>
</a></li>
<li><a href="#"> <span class="icon"><i
class="fas fa-leaf"></i></span> <span class="title">Nature</span>
</a></li>
</ul>
</div>
<div class="main_container">
<div class="top_navbar" >
<div class="hamburger" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<i class="fas fa-bars"></i>
</div>
<div class="top_menu">
<div class="logo">logo</div>
<ul>
<li> <i class="fas fa-search"></i></li>
<li><a href="#"> <i class="fas fa-bell"></i>
</a></li>
<li><a href="#"> <i class="fas fa-user"></i>
</a></li>
</ul>
</div>
</div>
<div id ="Home">
<jsp:include page="Home.jsp"/>
</div>
</div>
</div>
</body>
</html>
problem comes if the below line added
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
I tried without bootstrap css it is working fine.But the bootstrap css is essential.

Put your scripts in this order and don't forget to put important rules to your css which might be overriding some default bootstrap css
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../css/dataTables.min.css">
<script type="text/javascript" src="../Scripts/dataTables.min.js"></script>
<link rel="stylesheet" href="../css/Side.css">
<script src="../Scripts/fontawsome.js"></script>

how to make an active element in dropdowns with html, css, bootstrap

I have provided a snippet, however the output is different from here and so please beware. I am trying to achieve where:
When the user clicks 'Home 1' under 'Home', it will be an active element
In addition, when the user clicks 'Home 2', 'Home 1' will be inactive and 'Home 2' will be an active element
Same goes for the 'Pages' dropdown list. May I know what are the solutions?
/*
DEMO STYLE
*/
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
i,
span {
display: inline-block;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
display: flex;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
min-width: 80px;
max-width: 80px;
text-align: center;
}
#sidebar.active .sidebar-header h3,
#sidebar.active .CTAs {
display: none;
}
#sidebar.active .sidebar-header strong {
display: block;
}
#sidebar ul li a {
text-align: left;
}
#sidebar.active ul li a {
padding: 20px 10px;
text-align: center;
font-size: 0.85em;
}
#sidebar.active ul li a i {
margin-right: 0;
display: block;
font-size: 1.8em;
margin-bottom: 5px;
}
#sidebar.active ul ul a {
padding: 10px !important;
}
#sidebar.active .dropdown-toggle::after {
top: auto;
bottom: 10px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar .sidebar-header strong {
display: none;
font-size: 1.8em;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li a i {
margin-right: 10px;
}
#sidebar ul li.active > a,
a[aria-expanded="true"] {
color: #6d7fcc;
background: #fff;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
min-width: 80px;
max-width: 80px;
text-align: center;
margin-left: -80px !important;
}
.dropdown-toggle::after {
top: auto;
bottom: 10px;
right: 50%;
-webkit-transform: translateX(50%);
-ms-transform: translateX(50%);
transform: translateX(50%);
}
#sidebar.active {
margin-left: 0 !important;
}
#sidebar .sidebar-header h3,
#sidebar .CTAs {
display: none;
}
#sidebar .sidebar-header strong {
display: block;
}
#sidebar ul li a {
padding: 20px 10px;
}
#sidebar ul li a span {
font-size: 0.85em;
}
#sidebar ul li a i {
margin-right: 0;
display: block;
}
#sidebar ul ul a {
padding: 10px !important;
}
#sidebar ul li a i {
font-size: 1.3em;
}
#sidebar {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
</head>
<body>
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
<strong>BS</strong>
</div>
<ul class="list-unstyled components">
<li>
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-home"></i>
Home
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Home 1
</li>
<li>
Home 2
</li>
<li>
Home 3
</li>
</ul>
</li>
<li>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
<i class="fas fa-copy"></i>
Pages
</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
</ul>
</li>
</ul>
</nav>
<!-- Page Content -->
<div id="content">
</div>
</div>
</body>
</html>

try this use jquery to control style
https://codepen.io/anon/pen/ZVbVYw
$(document).ready(function () {
$('#homeSubmenu li, #pageSubmenu li').on('click', function () {
$('#homeSubmenu li, #pageSubmenu li').removeClass('active');
$(this).addClass('active');
});
});

Jquery Drop Down Menu. The sub menu disappears when clicked. So, How to make the submenu stays when clicked?

I'm Using jquery to show the submenu when menu(members)clicked. The toggle works when I click the Member menu and the problem is, when I click the submenu it will disappear, so I want it to stay when clicked. How to do that in javascript?...
<html>
<head>
<title>Dashboard</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e)
{
$('.has-sub').click(function(){
$(this).toggleClass('tap')
});
});
</script>
</head>
<body>
<header>
<div class="logo">WORKOUT <span>FITNESS CENTER</span></div>
</header>
<div id="container">
<nav>
<ul>
<li>Walk-In</li>
<li class="has-sub">Members
<ul>
<li>Subscr</li>
<li>asdasd</li>
<li>asdasd</li>
</ul>
</li>
<li>Sales</li>
<li>Inventory</li>
<li>Suppliers</li>
<li>Reports</li>
</ul>
</nav>
<div id="content">
SOME CONTENT YAY
</div>
</div>
</body>
</html>
CSS
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300italic,300);
*{
margin: 0;
padding: 0;
}
body {
font-family: 'Open Sans';
}
a{
text-decoration: none;
}
header{
width: 100%;
height: 50px;
border-bottom: 1px solid #858585;
}
.logo {
float: left;
margin-top: 9px;
margin-left: 15px;
}
.logo a{
font-size: 1.3em;
color: #070807;
}
.logo a span{
font-weight: 300;
color: #1AC93A;
}
nav{
width: 250px;
height: calc(100% - 50px);
background-color: #171717;
float: left;
}
#content {
width: :auto;
margin-left: 250px;
height: calc(100% - 50px);
padding: 15px
}
nav li{
list-style: none;
}
nav li a{
color: #ccc;
display: block;
padding: 10px;
font-size: 0.8em;
border-bottom: 1px solid #0a0a0a;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
nav li a:hover{
background-color: #030303;
color: #fff;
padding-left: 80px;
}
nav ul li ul {
display: none;
}
/*nav ul li:hover > ul{
display: block;
}*/
nav ul li.tap > ul{
display: block;
}

This is because the events on child bubble up to the parent when clicked, to stop this add a click event to the child element and call e.stopPropagation() to prevent bubbling up to the parent being .has-sub:
$(".has-sub ul").click(function(e){
e.stopPropagation();
});
Fiddle Example

Add a sub class to the ul from the li
Try:
<div id="container">
<nav>
<ul>
<li>Walk-In
</li>
<li class="has-sub">Members
<ul class="sub">
<li>Subscr
</li>
<li>asdasd
</li>
<li>asdasd
</li>
</ul>
</li>
<li>Sales
</li>
<li>Inventory
</li>
<li>Suppliers
</li>
<li>Reports
</li>
</ul>
</nav>
<div id="content">SOME CONTENT YAY</div>
</div>
$('.has-sub').click(function(e){
if ($(e.target).parents('.sub').length == 0 ){
$(this).toggleClass('tap');
}
});
jsfiddle: https://jsfiddle.net/v9ynq7og/

Try this. i have added id into main menu and while click check for target id and base on this you can perform appropriate action
$(document).ready(function(e) {
$('.has-sub').click(function(e) {
if (e.target.id)
$(this).toggleClass('tap')
});
});
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300italic,300);
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Open Sans';
}
a {
text-decoration: none;
}
header {
width: 100%;
height: 50px;
border-bottom: 1px solid #858585;
}
.logo {
float: left;
margin-top: 9px;
margin-left: 15px;
}
.logo a {
font-size: 1.3em;
color: #070807;
}
.logo a span {
font-weight: 300;
color: #1AC93A;
}
nav {
width: 250px;
height: calc(100% - 50px);
background-color: #171717;
float: left;
}
#content {
width: : auto;
margin-left: 250px;
height: calc(100% - 50px);
padding: 15px
}
nav li {
list-style: none;
}
nav li a {
color: #ccc;
display: block;
padding: 10px;
font-size: 0.8em;
border-bottom: 1px solid #0a0a0a;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
nav li a:hover {
background-color: #030303;
color: #fff;
padding-left: 80px;
}
nav ul li ul {
display: none;
}
/*nav ul li:hover > ul{
display: block;
}*/
nav ul li.tap > ul {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<title>Dashboard</title>
<body>
<header>
<div class="logo">WORKOUT <span>FITNESS CENTER</span>
</div>
</header>
<div id="container">
<nav>
<ul>
<li>Walk-In
</li>
<li class="has-sub">
<a href="#" id='id1'>Members</a>
<ul>
<li>Subscr
</li>
<li>asdasd
</li>
<li>asdasd
</li>
</ul>
</li>
<li>Sales
</li>
<li>Inventory
</li>
<li>Suppliers
</li>
<li>Reports
</li>
</ul>
</nav>
<div id="content">
SOME CONTENT YAY
</div>
</div>
</body>
</html>

I think you are looking for this...
$(document).ready(function(e)
{
$('.test').click(function(e){
if($(this).hasClass("test1"))
{
e.stopPropagation();
}else
{
$(this).toggleClass('tap');
}
});
});
**CSS**
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300italic,300);
*{
margin: 0;
padding: 0;
}
body {
font-family: 'Open Sans';
}
a{
text-decoration: none;
}
header{
width: 100%;
height: 50px;
border-bottom: 1px solid #858585;
}
.logo {
float: left;
margin-top: 9px;
margin-left: 15px;
}
.logo a{
font-size: 1.3em;
color: #070807;
}
.logo a span{
font-weight: 300;
color: #1AC93A;
}
nav{
width: 250px;
height: calc(100% - 50px);
background-color: #171717;
float: left;
}
#content {
width: :auto;
margin-left: 250px;
height: calc(100% - 50px);
padding: 15px
}
nav li{
list-style: none;
}
nav li a{
color: #ccc;
display: block;
padding: 10px;
font-size: 0.8em;
border-bottom: 1px solid #0a0a0a;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
nav li a:hover{
background-color: #030303;
color: #fff;
padding-left: 80px;
}
nav ul li ul {
display: none;
}
/*nav ul li:hover > ul{
display: block;
}*/
nav ul li.tap > ul{
display: block;
}
<html>
<head>
<title>Dashboard</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<header>
<div class="logo">WORKOUT <span>FITNESS CENTER</span></div>
</header>
<div id="container">
<nav>
<ul>
<li>Walk-In</li>
<li class="has-sub test">Members
<ul>
<li><a href="#" class='test test1'>Subscr</a></li>
<li><a href="#" class='test test1'>asdasd</a></li>
<li><a href="#" class='test test1'>asdasd</a></li>
</ul>
</li>
<li>Sales</li>
<li>Inventory</li>
<li>Suppliers</li>
<li>Reports</li>
</ul>
</nav>
<div id="content">
SOME CONTENT YAY
</div>
</div>
</body>
</html>

Need to add a jquery function.
$('.has-sub ul').click(function(){
return false
});
Here is the jsFiddle for your requirement

Develop Reference

JavaScript is the programming language of the Web.

Responsive collapsible sidebar using bootstrap - javascript

Related

Dropdown nav on another bar

my website is ok on iphone 6/7/8 but messes up on others, how do i fix

SideBar navigation collapse shows blank screen when bootstrap 4 css loaded

how to make an active element in dropdowns with html, css, bootstrap

Jquery Drop Down Menu. The sub menu disappears when clicked. So, How to make the submenu stays when clicked?

Categories

Resources