I need to make a side navigation menu.
What I have so far:
function toggle() {
document
.querySelector('.nuxt-link-exact-active')
.classList.remove('nuxt-link-exact-active')
event.target.classList.add('nuxt-link-exact-active')
}
.default-layout {
background: purple;
min-height: 100%;
display: grid;
grid-template-columns: 230px 1fr;
}
main {
background: #000;
border-radius: 0.9rem;
margin: 1.5rem 2rem 1.5rem 0;
padding: 2rem;
}
nav ul {
display: grid;
grid-gap: 1rem;
justify-content: center;
padding: 5rem 0;
grid-template-columns: 100%;
padding-left: 2rem;
list-style: none;
}
nav ul li .nav-item {
cursor: pointer;
color: #fff;
display: block;
padding: 1.5rem;
}
nav ul li .nav-item.nuxt-link-exact-active {
background: #000;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
<div class="default-layout">
<nav>
<ul>
<li>
<a class="nav-item nuxt-link-exact-active" onclick="toggle()"
>Menu 1</a
>
</li>
<li>
<a class="nav-item" onclick="toggle()">Menu 2</a>
</li>
<li>
<a class="nav-item" onclick="toggle()">Menu 3</a>
</li>
<li>
<a class="nav-item" onclick="toggle()">Menu 4</a>
</li>
</ul>
</nav>
<main>
<p>content</p>
</main>
</div>
The look I need, but I haven't been successful:
In addition to this look, I need effects when navigating between items, but I have no idea how to do them, here are some examples of smooth effects I would like:
https://dribbble.com/shots/5357786-Desktop-Messenger-Spaces-Animation
Try this
function toggle() {
document
.querySelector('.nuxt-link-exact-active')
.classList.remove('nuxt-link-exact-active')
event.target.classList.add('nuxt-link-exact-active')
}
.default-layout {
background: purple;
min-height: 100%;
display: grid;
grid-template-columns: 230px 1fr;
}
main {
background: #000;
border-radius: 0.9rem;
margin: 1.5rem 2rem 1.5rem 0;
padding: 2rem;
}
nav ul {
display: grid;
grid-gap: 1rem;
justify-content: center;
padding: 5rem 0;
grid-template-columns: 100%;
padding-left: 2rem;
list-style: none;
}
nav ul li .nav-item {
cursor: pointer;
color: #fff;
display: block;
padding: 1.5rem;
transition: width 300ms;
width: 120px;
float: right;
}
nav ul li .nav-item.nuxt-link-exact-active {
background: #000;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
position:relative;
z-index:9999;
transition:200ms;
width: 160px;
}
nav ul li .nav-item:before{
position:absolute;
top: -50px;
right: 0;
width: 50px;
height: 50px;
border-radius: 54% 0 40% 0;
content:'';
z-index:-1;
transition: 300ms;
transition-timing-function: ease-in-out;
}
nav ul li .nav-item.nuxt-link-exact-active:before,nav ul li .nav-item.nuxt-link-exact-active:after{
box-shadow: 15px 15px 0 0 #000;
transition: 300ms;
transition-timing-function: ease-in-out;
}
nav ul li .nav-item:after{
position:absolute;
bottom: -50px;
right: 0;
width: 50px;
height: 50px;
border-radius: 0 0 54% 40%;
content:'';
transform:rotate(270deg);
z-index:-1;
}
<div class="default-layout">
<nav>
<ul>
<li>
<a class="nav-item nuxt-link-exact-active" onclick="toggle()"
>Menu 1</a
>
</li>
<li>
<a class="nav-item" onclick="toggle()">Menu 2</a>
</li>
<li>
<a class="nav-item" onclick="toggle()">Menu 3</a>
</li>
<li>
<a class="nav-item" onclick="toggle()">Menu 4</a>
</li>
</ul>
</nav>
<main>
<p>content</p>
</main>
</div>
You can change width size according to your case.
I make style now . later add animation smooth..
<style type="text/css">
.default-layout {
background: purple;
min-height: 100%;
display: grid;
grid-template-columns: 230px 1fr;
}
main {
background: #000;
border-radius: 0.9rem;
margin: 1.5rem 2rem 1.5rem 0;
padding: 2rem;
}
nav ul {
display: grid;
grid-gap: 1rem;
justify-content: center;
padding: 5rem 0;
grid-template-columns: 100%;
padding-left: 2rem;
list-style: none;
}
nav ul li .nav-item {
cursor: pointer;
color: #fff;
display: block;
padding: 1.5rem;
transition: width 200ms;
width: 160px;
float: right;
}
nav ul li .nav-item.nuxt-link-exact-active {
background: #000;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
position:relative;
z-index:9999;
}
nav ul li:first-child .nav-item.nuxt-link-exact-active.tobottom{
animation: fadeInbottomsmall 1s ease-in-out;
}
nav ul li:last-child .nav-item.nuxt-link-exact-active.totop{
animation: fadeIntopsmall 1s ease-in-out;
}
nav ul li .nav-item.nuxt-link-exact-active.totop{
animation: fadeIntop 1s ease-in-out;
}
nav ul li .nav-item.nuxt-link-exact-active.tobottom{
animation: fadeInbottom 1s ease-in-out;
}
nav ul li .nav-item:before{
position:absolute;
top: -50px;
right: 0;
width: 50px;
height: 50px;
border-radius: 54% 0 40% 0;
content:'';
z-index:9999999;
}
nav ul li .nav-item.nuxt-link-exact-active:before,nav ul li .nav-item.nuxt-link-exact-active:after{
box-shadow: 15px 15px 0 0 #000;
}
nav ul li .nav-item:after{
position:absolute;
bottom: -50px;
right: 0;
width: 50px;
height: 50px;
border-radius: 0 0 54% 40%;
content:'';
transform:rotate(270deg);
z-index:9999999999;
}
#keyframes fadeInbottom{
0%{
transform:translateY(-67px);
}100%{
transform:translateY(0px);
}
}
#keyframes fadeIntop{
0%{
transform:translateY(0px);
}100%{
transform:translateY(-67px);
}
}
#keyframes fadeInbottomsmall{
0%{
transform:translateY(-33px}!important;
}100%{
transform:translateY(0px) !important;
}
}
#keyframes fadeIntopsmall{
0%{
transform:translateY(0px);
}100%{
transform:translateY(-33px);
}
}
</style>
<div class="default-layout">
<nav>
<ul>
<li>
<a class="nav-item nuxt-link-exact-active tobottom" id="menu1" onclick="anim()"
>Menu 1</a
>
</li>
<li>
<a class="nav-item" onclick="anim()" id="menu2">Menu 2</a>
</li>
<li>
<a class="nav-item" onclick="anim()" id="menu3">Menu 3</a>
</li>
<li>
<a class="nav-item" onclick="anim()" id="menu4">Menu 4</a>
</li>
</ul>
</nav>
<main>
<p>content</p>
</main>
</div>
<script type="text/javascript">
function anim() {
var all = document.querySelectorAll('.nav-item');
var prev,prevElement,nxtElement,nxt,dist;
for (var i = 0; i < all.length; i++) {
nxtElement = event.target;
// console.log(prevElement)
if(all[i].classList.contains('nuxt-link-exact-active')){
prevElement = all[i];
prev = i + 1;
prevElement.classList.remove('nuxt-link-exact-active');
// nxtElement = prevElement[i];
}
if(all[i]==nxtElement){
nxt = i+1;
}
}
console.log(prev);
console.log(nxt);
if(nxt > prev){
nxtElement.classList.add('nuxt-link-exact-active','tobottom');
nxtElement.classList.remove('totop');
prevElement.classList.remove('tobottom',"totop");
dist=(nxt-prev)*-67;
}else{
nxtElement.classList.add('nuxt-link-exact-active','totop');
nxtElement.classList.remove('tobottom');
prevElement.classList.remove('tobottom',"totop");
dist=((prev-nxt)-1)*-67;
}
var style = document.createElement('style');
// console.log(distance);
style.type = 'text/css';
var keyFrames = '\
#keyframes fadeInbottom {\
0% {\
transform:translateY('+dist+'px);\
}\
100% {\
transform:translateY(0);\
}\
};\
#keyframes fadeIntop {\
0% {\
transform:translateY(0px);\
}\
100% {\
transform:translateY('+dist+'px);\
}\
};';
style.innerHTML = keyFrames;
console.log(style.innerHTML);
document.head.appendChild(style);
}
</script>
Related
I have navigation bar for pc and for mobile, problem is if I maximize window when mobile navbar is opened, mobile navbar will disappear as it should but desktop navbar doesn't appear. I am working with bootstrap template and I don't know if my problem solution requires javascript knowledge but if it does, I can show it.
Here is my css code
/**
* Desktop Navigation
*/
.navbar {
padding: 0;
}
.navbar ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
align-items: center;
}
.navbar li {
position: relative;
}
.navbar a,
.navbar a:focus {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0 10px 30px;
font-size: 15px;
font-weight: 500;
color: #751D41;
white-space: nowrap;
transition: 0.3s;
}
.navbar a.active { color: #751D41}
.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
color: #402D85;
}
.navbar .getintouch,
.navbar .getintouch:focus {
padding: 8px 20px;
margin-left: 30px;
border-radius: 50px;
color: #751D41;
font-size: 14px;
border: 2px solid #751D41;
font-weight: 600;
}
.navbar .getintouch:hover,
.navbar .getintouch:focus:hover {
color: #fff;
background: #751D41;
}
/**
* Mobile Navigation
*/
.navbar-mobile {
display: none;
}
.mobile-nav-toggle {
color: #fff;
font-size: 28px;
cursor: pointer;
display: none;
line-height: 0;
transition: 0.5s;
}
.mobile-nav-toggle.bi-x {
color: #fff;
}
#media (max-width: 991px) {
.mobile-nav-toggle {
display: block;
}
.navbar ul {
display: none;
}
.navbar-mobile {
display: block;
position: fixed;
overflow: hidden;
top: 55px;
right: 20px;
left: 10;
bottom: 150px;
transition: 0.3s;
z-index: 999;
}
}
.navbar-mobile .mobile-nav-toggle {
position: absolute;
top: 15px;
right: 15px;
}
.navbar-mobile ul {
display: block;
top: 55px;
right: 15px;
bottom: 15px;
left: 15px;
padding: 10px 0;
border-radius: 10px;
background: rgba(253, 110, 110, 0.5);
overflow-y: auto;
transition: 0.3s;
}
.navbar-mobile a,
.navbar-mobile a:focus {
padding: 10px 20px;
font-size: 14px;
color: white;
}
.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover>a {
color: #751D41;
}
.navbar-mobile .getintouch,
.navbar-mobile .getintouch:focus {
margin: 15px;
color: #402D85;
}
and here is html code
<!-- ======= Header ======= -->
<header id="header" class="fixed-top ">
<div class="container d-flex align-items-center">
<img src="assets/img/navLogo.png" alt="" class="img-fluid">
<nav id="navbar" class="navbar">
<ul>
<li><a class="nav-link scrollto" href="#hero">Home</a></li>
<li><a class="nav-link scrollto" href="#hero">About Us</a></li>
<li><a class="nav-link scrollto" href="#hero">Our Team</a></li>
<li><a class="nav-link scrollto" href="#hero">Our Offers</a></li>
<li><a class="nav-link scrollto" href="#hero">Projects</a></li>
<li><a class="nav-link scrollto" href="#hero">Careers</a></li>
<li><a class="getintouch scrollto" href="#hero">Get In Touch</a></li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav><!-- .navbar -->
</div>
</header><!-- End Header -->
Use this code for your Header and edit accordingly you want it, its responsive too.
$(document).ready(function() {
// Toggle menu on click
$("#menu-toggler").click(function() {
toggleBodyClass("menu-active");
});
function toggleBodyClass(className) {
document.body.classList.toggle(className);
}
});
/* Extra */
$primary: #fff;
$secondary: #ccc;
$ternary: #272727;
$dark: #444444;
body {
background: $secondary;
color: $ternary;
font-size: 14px;
margin: 0;
}
.logo {
max-width: 200px;
}
.navbar {
align-items: center;
background: $primary;
box-shadow: 0 5px 20px rgba(0,0,0,0.2);
display: flex;
flex-direction: row;
font-family: sans-serif;
padding: 10px 50px;
}
.push-left {
margin-left: auto;
}
/* Menu */
.hamburger {
background: transparent;
border: none;
cursor: pointer;
display: none;
outline: none;
height: 30px;
position: relative;
width: 30px;
z-index: 1000;
#media screen and (max-width: 768px) {
display: inline-block;
}
&-line {
background: $ternary;
height: 3px;
position: absolute;
left: 0;
transition: all .2s ease-out;
width: 100%;
.hamburger:hover & {
background: #777;
}
&-top {
top: 3px;
}
.menu-active &-top {
top: 50%;
transform: rotate(45deg) translatey(-50%);
}
&-middle {
top: 50%;
transform: translatey(-50%);
}
.menu-active &-middle {
left: 50%;
opacity: 0;
width: 0;
}
&-bottom {
bottom: 3px;
}
.menu-active &-bottom {
bottom: 50%;
transform: rotate(-45deg) translatey(50%);
}
}
}
.nav-menu {
display: flex;
list-style: none;
margin: 0;
padding: 0;
transition: all .25s ease-in;
#media screen and (max-width: 768px) {
background: $primary;
flex-direction: column;
justify-content: center;
opacity: 0;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
transform: translatey(-100%);
text-align: center;
.menu-active & {
transform: translatey(0%);
opacity: 1;
}
}
.menu-item a {
color: $dark;
display: block;
line-height: 30px;
margin: 0px 10px;
text-decoration: none;
text-transform: uppercase;
&:hover {
color: lighten($dark, 20);
text-decoration: underline;
}
#media screen and (max-width: 768px) {
font-size: 20px;
margin: 8px;
}
}
}
.sub-nav {
border: 1px solid #ccc;
display: none;
position: absolute;
background-color: $primary;
padding: 5px 5px;
list-style: none;
width: 230px;
#media screen and (max-width: 768px) {
position: relative;
width: 100%;
display: none;
background-color: rgba(0, 0, 0, 0.20);
box-sizing: border-box;
}
}
.nav__link {
&:hover + .sub-nav {
display:block;
}
}
.sub-nav {
&:hover {
display:block;
}
}
<nav class="navbar">
<div class="logo"><img src="https://upload.wikimedia.org/wikipedia/commons/2/23/AS_sample_logo.png" alt="LOGO"></div>
<div class="push-left">
<button id="menu-toggler" data-class="menu-active" class="hamburger">
<span class="hamburger-line hamburger-line-top"></span>
<span class="hamburger-line hamburger-line-middle"></span>
<span class="hamburger-line hamburger-line-bottom"></span>
</button>
<!-- Menu compatible with wp_nav_menu -->
<ul id="primary-menu" class="menu nav-menu">
<li class="menu-item "><a class="nav__link" href="#">Home</a>
</li>
<li class="menu-item "><a class="nav__link" href="#">About Us</a>
</li>
<li class="menu-item "><a class="nav__link" href="#">Our Team</a>
</li>
<li class="menu-item "><a class="nav__link" href="#">Our Offers</a>
</li>
<li class="menu-item "><a class="nav__link" href="#">Projects</a>
</li>
<li class="menu-item "><a class="nav__link" href="#">Careers</a>
</li>
<li class="menu-item "><a class="nav__link" href="#">Get In Touch</a>
</li>
</ul>
</div>
</nav>
I am building a site with a js menu that loads content into a container div. The site works fine on desktop, and on the respsonsive mobile emulator on my desktop browser, but on my phone it doesn't scroll.
https://clippingpointmedia.co.za/cpm2019dev/
This is my main stylesheet:
/* CSS Document */
body {
padding: 0;
margin: 0;
background-color: #222;
font-family: 'Comfortaa';
}
#container {
display: block;
padding: 0;
}
#content {
margin-top: 0;
margin-right: 70px;
margin-left: 70px;
margin-bottom: 0px;
max-height:100vh;
overflow:hidden;
transition-timing-function: ease-in-out;
transition-duration: 0.5s;
}
#page-content {
width: 100%;
min-height: 100vh;
}
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #2693C1;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#mobile-nav, .mobile-footer {
display: none;
}
.side-nav {
position: fixed;
top: 50%;
transform: translateY(-50%);
left: -300px;
width: 360px;
transition-timing-function: ease-in-out;
transition-duration: 0.5s;
}
.side-menu {
width: 300px;
background-color: #fff;
}
.menu-toggle, .mobile-menu-toggle {
width: 60px;
height: 60px;
background-size: 90%;
background-image: url("../images/MenuButtonOpen.svg");
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
float: right;
position: relative;
transition-delay: 0.1s;
transition-timing-function: ease-in-out;
transition-duration: 0.4s;
}
.menu-top {
height: 150px;
padding: 20px 0 0;
text-align: center;
}
#mobile-cp-logo {
background: url("../images/HomeIcon-light.svg") no-repeat center;
height: 45px;
padding-top: 10px;
margin-bottom: 10px;
margin-left: -30px
}
#cp-logo {
height: 120px;
max-width: 175px;
display: block;
margin: 0 auto 20px;
background: url("../images/HomeIcon-dark.svg") no-repeat center;
transition-delay: 0.1s;
transition-timing-function: ease-in-out;
transition-duration: 0.4s;
}
#pt-container {
padding: 15px 0;
background-color: #ccc;
text-align: center;
transition-delay: 0.1s;
transition-timing-function: ease-in-out;
transition-duration: 0.4s;
width: 100%;
}
#prod-title, #digi-title, #event-title {
background-color: #ccc;
text-transform: uppercase;
color: #fff;
border-top: 1px solid #2693C1;
border-bottom: 1px solid #2693C1;
padding: 10px 0;
width: 66.66667%;
margin: 0 auto;
font-size: 20px;
font-weight: 300;
display: none;
}
.side-menu ul {
list-style: none;
}
.side-ul ul {
list-style: none;
margin: 0;
padding: 0;
}
.side-ul li a {
display: block;
color: #fff;
text-align: center;
width: 100%;
padding: 30px 0;
background: linear-gradient(#444 0%, #1c1c1c 100%);
font-weight: 700;
font-size: 18px;
text-transform: lowercase;
text-decoration: none;
}
.side-ul li a::after, .top-ul li a::after {
float: right;
content: url("../images/arrow-right.svg");
padding-right: 20px;
padding-left: -20px;
}
.side-ul li a:focus::before, .top-ul li a:focus::before {
float: left;
content: url("../images/arrow-left.svg");
padding-right: -20px;
padding-left: 20px;
}
.side-sub-ul ul, .side-footer ul, .mobile-sub-ul ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
}
.side-sub-ul li, .side-footer li, .mobile-sub-ul li {
float: left;
width: 33.333333%;
}
.side-sub-ul li a, .side-footer li a, .mobile-sub-ul li a {
display: block;
text-align: center;
text-transform: lowercase;
text-decoration: none;
width: 100%;
}
.side-sub-ul li a, .mobile-sub-ul li a {
color: #606060;
background-color: #ccc;
font-size: 13px;
padding: 18px 0;
margin: 7px 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.side-sub-ul li, .mobile-sub-ul li {
background-color: #ccc;
list-style-type: none;
}
.side-footer li a {
color: #273658;
font-size: 8px;
padding: 5px 0;
background-color: #fff;
width: 100%;
}
.show {
display: initial
}
.hide {
display: none;
}
.menu-item-tablet {
display: none !important;
}
.wes-hi {
border-top: 1px solid #fff !important;
border-bottom: 1px solid #fff !important;
}
.social {
position: fixed;
width: 60px;
top: 50%;
right: 0;
transform: translateY(-50%);
}
.social a {
display: block;
text-align: center;
padding: 9px 0;
}
.mobile-footer a {
color: #fff;
font-size: 8px;
text-decoration: none;
padding: 0 5px;
}
.mobile-footer li {
display: inline-block;
}
#totop-btn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background-color: rgba(0,0,0,0.8);
color: white;
cursor: pointer;
padding: 1px 14px 7px 15px;
font-size: 30px;
border-radius: 0;
transform: rotate(-90deg);
}
#totop-btn:hover {
color: #2693C1;
}
#bg {
position: fixed;
top: 0;
min-height: 100vh;
min-width: 100vw;
overflow: hidden;
z-index: -9;
background: url("../images/full-bg.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* Responsive Queries */
#media only screen and (max-width: 992px) {
/* Tablet View */
.menu-item {
display: none !important;
}
.menu-item-tablet {
display: block !important;
}
#content {
margin-right: 0;
/* padding-top: 10px;/* height: calc(100vh - 10px);*/
}
.social {
width: 100%;
bottom: 0;
transform: none;
text-align: center;
background: rgba(0,0,0,0.8);
top: auto;
position:absolute;
}
.social a {
display: inline-block;
padding: 5px;
}
.social a img {
transform: scale(0.75);
}
.mobile-footer {
display: inline-block;
vertical-align: 95%;
}
#totop-btn {
bottom: 50px;
}
.side-footer {
display: none
}
}
#media only screen and (max-width: 359px), (orientation: landscape) and (max-width:600px) {
/* Small Mobile View */
#container {
display: block;
width: 100%;
min-height: -webkit-fill-available;
}
#content {
margin-left: 0;
margin-top: 0;
padding-top: 0;
}
#page-content {
min-height: calc(100vh - 138px);
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
.side-nav {
display: none;
position:absolute;
visibility: hidden;
z-index: -99999;
}
#mobile-nav {
/* position: fixed;*/
top: 0;
width: 100%;
display: block;
background-color: rgba(0,0,0,0.8);
padding: 10px 0;
height: 55px;
overflow: hidden;
transition-timing-function: ease-in-out;
transition-duration: 0.5s;
}
.mobile-menu-toggle {
height: 55px;
}
.top-ul li a {
display: block;
color: #fff;
text-align: center;
width: 100%;
padding: 20px 0;
background: linear-gradient(#444 0%, #1c1c1c 100%);
font-weight: 700;
font-size: 14px;
text-transform: lowercase;
text-decoration: none;
}
.mobile-footer {
/* vertical-align: top;*/
padding-bottom: 3px;
}
.social {
height: 63px;
}
.social a {
padding: 4px 10px 0;
}
.side-sub-ul li a, .mobile-sub-ul li a {
padding: 15px 0;
margin: 7px 0;
}
}
And the relevant html:
<body>
<div id="loader"></div>
<div id="container" style="display: none">
<div id="mobile-nav">
<div class="mobile-menu-toggle" onclick="togglemobilenav()"></div>
<ul class="top-ul">
<div id="mobile-cp-logo"></div>
<li>Production
</li>
<li>Digital
</li>
<li>Events
</li>
</ul>
<ul class="mobile-sub-ul">
<li>About
</li>
<li>News
</li>
<li>Contact
</li>
</ul>
</div>
<div class="side-nav">
<div class="menu-toggle" onclick="togglenav()"></div>
<div class="side-menu">
<div class="menu-top">
<div id="cp-logo"></div>
<div id="pt-container" style="display:none">
<div id="prod-title">Production</div>
<div id="digi-title">Digital</div>
<div id="event-title">Events</div>
</div>
</div>
<ul class="side-ul">
<li>Production
</li>
<li>Production
</li>
<li>Digital
</li>
<li>Digital
</li>
<li>Events
</li>
<li>Events
</li>
</ul>
<ul class="side-sub-ul">
<li>About
</li>
<li>About
</li>
<li>News
</li>
<li>News
</li>
<li>Contact
</li>
<li>Contact
</li>
</ul>
<ul class="side-footer">
<li>© clipping point 2019
</li>
<li>our terms & conditions
</li>
<li>our terms
</li>
<li>our privacy policy
</li>
<li>our privacy policy
</li>
</ul>
</div>
</div>
<!-- content will be loaded here -->
<div id="content"></div>
<div class="social">
<img src="images/li-icon.svg" alt="" />
<!-- <img src="images/fb-icon.svg" alt="" />-->
<img src="images/tw-icon.svg" alt="" />
<img src="images/yt-icon.svg" alt="" />
<img src="images/insta-icon.svg" alt="" />
<ul class="mobile-footer">
<li>© clipping point 2019
</li>
<li>our terms
</li>
<li>our privacy policy
</li>
</ul>
</div>
</div>
<div id="bg"></div>
</body>
I think it has something to do with the height of the #page-content div that I have set to min-height: calc(100vh - 138px) to compensate for the navbar at the top and the footer at the bottom.
Alternatively it may have something to do with visibility or positioning on the other elements. The layout of the site changes completely on smaller devices...
I've tried adding -webkit-overflow-scrolling: touch; to various elements, but even when I set it to all elements using * {} it still doesn't scroll.
I've read a dozen posts some of which point to position: fixed so i've tried switching to absolute positioning...
It seems like the whole page tries to scroll instead of the #content or #page-content div... i'm just at a loss! PLEASE HELP!!!
Add below CSS inside #media only screen and (max-width: 800px) in your style.css at line no 4030. It'll unable your parent scroll and disable your individual container scroll and also you add an individual footer in each container. So I also hide all container's footer and visible only last container footer. Try this I hope it'll help you out. Thanks
#ascensorBuilding {
overflow: auto !important;
}
#ascensorBuilding > div {
position: static !important;
overflow: hidden !important;
height: auto !important;
transform: none !important;
}
#ascensorBuilding > div .footer {
display: none;
}
#ascensorBuilding > div:last-child .footer {
display: block;
}
I'm having issues with a drop-down menu I put inside the navigation menu. The problems are:
1. The Menu doesn't open at all
2. The drop down menu's should open to the right not the bottom (like the picture)
3. The links that are selected should change depending on the selection so by default it should be Option A, then I can click on dropdown Option B, or C, etc.
BONUS The drop down links should act like tabs and change the links under it like the picture:
I've been looking all over the place to figure out how to create a dropdown menu like the one pictured above, but I can't seem to find an answer. I'm still new to bootstrap, and I would definitely appreciate some advice on how I can get this done Thank you!
The FIDDLE: https://jsfiddle.net/f4e42hex/2/
HTML:
<div id="sidebar-wrapper2">
<!-- Sidebar -->
<div class="topfilter">
<input type="checkbox" style="vertical-align:middle;">
<div class="bs-example">
<div class="dropdown">
Option 1 <b class="caret"></b>
<ul class="dropdown-menu">
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
<li>Option 6</li>
</ul>
</div>
</div>
</div>
</div>
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>
<a href="#/content">
Option 1 - A
</a>
</li>
<li>
<a href="#/topics">
Option 1 - B
</a>
</li>
<li>
<a href="#">
Option 1 - C
</a>
</li>
<li>
<a href="#">
Option 1 - D
</a>
</li>
<li>
Option 1 - E
</li>
<li>
Option 1 - F
</li>
<li>
Option 1 - G
</li>
<li>
Option 1 - H
</li>
<li>
<a href="#"> Option 1 - I/a>
</li>
<li>
<a href="#"> Option 1 - J/a>
</li>
<li>
Option 1 - K
</li>
<div class="bottomfilter">
</div>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<div class="content" style="min-height:90%; background:white;" >
</div>
<div class="push"></div>
<footer class="footer">
</footer>
CSS:
a {outline:none !important;}
html,
body,
.wrap {
height: 100%;
}
.wrap {
box-sizing: border-box;
}
form {
height: 100%
}
.wrap {
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom: -60px;
/* for sticky footer to not go below page */
/* for sticky header to not overlap content */
}
.push,
.footer {
height: 60px;
}
.footer {
background-color: #ebebeb;
height: 60px;
width: 100%;
position: fixed;
bottom: 0;
}
.content {
position: absolute;
width: 100%;
top: 120px;
background-color: yellow;
z-index: 0;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 142px;
height:95%;
width: 0; bottom:0; top:50px;
height:auto; border-top:2px solid #666;
margin-left: -142px;
overflow-y: auto; overflow-x:hidden;
background: #eee;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#sidebar-wrapper2 {
z-index: 1000;
position: fixed;
left: 142px;
top:0;
margin-bottom: 0px;
width:100%;
min-height:55px; height:auto;
margin-left: -142px;
background: #eee;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.filtertitle { position:relative; display:inline-block; color:#000; width:auto; text-indent:10px; }
.topfilter { max-width:100%; vertical-align:middle; position:fixed; display:block; text-align:left; background-color:#eee; }
.bottomfilter {border-top: solid #666 1px; width:100%; height:auto; position:relative; display:block; text-align:left; background-color:#eee; }
#wrapper.toggled #sidebar-wrapper {
width: 200px;
}
#wrapper.toggled #sidebar-wrapper2 {
width: 200px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -200px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0px;
width:inherit; min-width:100%;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #333;
background: rgba(255, 255, 255, 0.6);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#media screen and (min-width:768px) {
#wrapper {
padding-left: 300px;
}
#wrapper.toggled {
padding-left: 0;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
#media screen and (max-width:1526px) {
.content,
.footer {
width: 82%;
right: 0;
}
.header {width:82%;}
#sidebar-wrapper {
width: 18%;
}
#sidebar-wrapper2 {
width: 18%;
}
}
#media screen and (max-width:1059px) {
.content,
.footer {
width: 80%;
right: 0;
}
.header {width:80%;}
#sidebar-wrapper {
width: 20%;
}
#sidebar-wrapper2 {
width: 20%;
}
}
#media screen and (min-width:1527px) {
.content,
.footer {
width: 85%;
right: 0;
}
.header {width:85%;}
#sidebar-wrapper {
width: 15%;
}
#sidebar-wrapper2 {
width: 15%;
}
}
#media screen and (max-width:991px) {
.content,
.footer {
width: 100%;
right: 0;
}
.filtertitle {display:none;}
#sidebar-wrapper {
width:0;
}
#sidebar-wrapper2 {
width:0;
}
I am trying to create a jQuery sliding navigation and I stumble into some problem. I don't know how to slide/hide and display my submenu.
Here's the HTML:
<div class="content">
<div class="page-content">
</div>
<div class="sidebar-nav">
<header class="logo">
<span class="fa fa-bars"></span>
<span id="logo">NAV</span>
</header>
<div class="nav">
<ul id="nav" >
<li><i class="fa fa-home"></i><span>Home</span></li>
<li><i class="fa fa-anchor"></i><span>Profile</span><span class="fa fa-plus" style="float: right"></span>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</li>
<li><i class="fa fa-gears"></i><span>Contact</span></li>
</ul>
</div>
</div>
</div>
Please help!
There's an error in your JSFiddle concerning your toggle = !toggle. However, why not just use the $('#elementId').toggle()? It's JQuery, and it simplifies this code massively. See here for my JSFiddle, and below for my code.
HTML:
<nav class="sidebar-nav">
<header class="logo">
<span class="fa fa-bars"></span>
<span id="logo">NAV</span>
</header>
<ul id="nav" class="nav">
<li><i class="fa fa-home"></i>Home</li>
<li><i class="fa fa-user"></i>Profile<i class="expandNav fa fa-plus-square"></i>
<ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1">
<li>profile.1</li>
<li>profile.2</li>
<li>profile.3</li>
</ul>
<li><i class="fa fa-envelope"></i>About<i class="expandNav fa fa-plus-square"></i>
<ul class="nav collapse" id="submenu2" role="menu" aria-labelledby="btn-1">
<li>About.1</li>
<li>About.2</li>
<li>About.3</li>
</ul>
</li>
<li><i class="fa fa-history"></i>Blog</li>
<li><i class="fa fa-share-alt"></i>Deals<i class="expandNav fa fa-plus-square"></i>
<ul class="nav collapse" id="submenu3" role="menu" aria-labelledby="btn-1">
<li>Deals.1</li>
<li>Deals.2</li>
<li>Deals.3</li>
</ul>
</li>
</ul>
</nav>
CSS (I took a lot of this from the original Fiddle):
html,
body {
font-family: 'Lato', sans-serif;
height: 100%;
background: #ecf0f1;
}
a {
color: #008DE7;
font-style: italic;
font-weight: 700;
}
.expandNav {
float: right;
padding-top: 4px;
}
.content {
min-width: 1260px;
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
margin: 0px auto;
}
.content.sidebar-collapsed {
padding-right: 65px;
transition: all 100ms linear;
transition-delay: 300ms;
}
.content.sidebar-collapsed-back {
padding-right: 280px;
transition: all 100ms linear;
}
.content.sidebar-collapsed .sidebar-nav {
width: 65px;
transition: all 100ms ease-in-out;
transition-delay: 300ms;
}
.content.sidebar-collapsed-back .sidebar-nav {
width: 280px;
transition: all 100ms ease-in-out;
}
.content.sidebar-collapsed .logo {
padding: 26px;
box-sizing: border-box;
transition: all 100ms ease-in-out;
transition-delay: 300ms;
}
.content.sidebar-collapsed-back .logo {
width: 100%;
padding: 21px;
height: 136px;
box-sizing: border-box;
transition: all 100ms ease-in-out;
}
.content.sidebar-collapsed #logo {
opacity: 0;
transition: all 200ms ease-in-out;
}
.content.sidebar-collapsed-back #logo {
opacity: 1;
transition: all 200ms ease-in-out;
transition-delay: 300ms;
}
.content.sidebar-collapsed #nav span {
opacity: 0;
transition: all 50ms linear;
}
.content.sidebar-collapsed-back #nav span {
opacity: 1;
transition: all 200ms linear;
}
.sidebar-nav {
position: fixed;
float: left;
width: 250px;
top: 0;
right: 0;
bottom: 0;
background-color: #e74c3c;
color: #aaabae;
font-family: "Lato";
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
z-index: 1;
}
#nav {
list-style: none;
margin: 0;
padding: 0;
margin-bottom: 20px;
}
#nav li {
position: relative;
margin: 0;
font-size: 15px;
border-bottom: 1px solid #fff;
padding: 0;
}
#nav li a {
font-style: normal;
font-weight: 400;
position: relative;
display: block;
padding: 16px 25px;
color: #fff;
white-space: nowrap;
z-index: 2;
text-decoration: none
}
#nav li a:hover {
color: #c0392b;
background-color: #ecf0f1;
}
#nav ul li {
background-color: #2b303a;
}
#nav li:first-child {
border-top: 1px solid #fff;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav .fa {
margin: 0px 17px 0px 0px;
}
.logo {
width: 100%;
padding: 21px;
margin-bottom: 20px;
box-sizing: border-box;
}
#logo {
color: #fff;
font-size: 30px;
font-style: normal;
}
.sidebar-icon {
position: relative;
float: right;
text-align: center;
line-height: 1;
font-size: 25px;
padding: 6px 8px;
color: #fff;
}
and JS (This was just to toggle the icons):
$('#nav a').click(function() {
$(this).find('i.expandNav').toggleClass('fa-plus-square fa-minus-square');
});
try the following
css:
.disp {
opacity: 1!important;
height:auto!important;
transition: height 100ms ease-in-out;
transition-delay: 300ms;
}
js:
$('.nav a').click(function(){
$(this).closest('li').find('ul').toggleClass('disp');
$(this).find('span.fa').toggleClass('fa-plus').toggleClass('fa-minus');
});
http://jsfiddle.net/2tz4usnL/3/
Here is a Working Fiddle
Add this Scripts
$('#nav a .fa.fa-plus').on('click',function(){
$(this).toggleClass('fa-plus').toggleClass('fa-minus'); //to toggle icons
$(this).closest('li').find('ul').toggleClass('active');
});
And this CSS
#nav li ul {
/*opacity: 0;*/ /* changed */
height: auto; /* changed */
display: none; /* added */
}
#nav li ul.active { /* added */
display:block;
}
I'm trying to do a expandable menu in jQuery and CSS3, here is the fiddle:
http://jsfiddle.net/mNcuQ/3/
When you click the slidebar, the titles section is showed. But I'm afraid it doesn't look properly. What I'm trying to do is when the .expanded class is active and the width of the slidebar is modified ( with the transition finished ) then show the titles of the menu with fade in effect. As I do now, the titles of the menu are not respeting the display: inline-block. Surely I'm missing something...
Do you have any idea or tip to do it? What is better to use in this case: CSS3 transition or jQuery animation?
Here is the code of the fiddle:
HTML
<div id="sidebar">
<a class="btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<nav id="nav" class="navigation" role="navigation">
<ul class="unstyled">
<li class="active" data-section="1"><i class="icon-home"></i> <span>Home</span>
</li>
<li data-section="2" class=""><i class="icon-rocket"></i> <span>Services</span>
</li>
<li data-section="3" class=""><i class="icon-laptop"></i> <span>Projects</span>
</li>
<li data-section="6" class=""><i class="icon-money"></i> <span>Price</span>
</li>
<li data-section="4" class=""><i class="icon-pencil"></i> <span>Team</span>
</li>
<li data-section="5" class="last"><i class="icon-envelope"></i> <span>Contact</span>
</li>
</ul>
</nav>
</div>
JS
$(document).ready(function ($) {
$('#sidebar').click(function () {
$('html').toggleClass('expanded');
});
});
CSS
#sidebar {
background-color: #151515;
height: 120%;
padding: 0;
position: fixed;
left: 0;
top: 0;
width: 50px;
z-index: 2;
cursor:pointer;
overflow-y: hidden;
}
#nav {
margin-top: 80px;
}
#nav ul {
list-style: none;
padding: 0;
margin: 0;
}
#nav ul li i {
font-size : 15px;
}
#nav ul li {
color: #F1F1F1;
cursor: pointer;
display: inline-block;
line-height: 22px;
filter: alpha(opacity=40);
font-size: 16px;
font-size: 1.6rem;
font-style: normal;
font-weight: 100;
opacity: .4;
padding: 8px 0 8px 15px;
text-transform: uppercase;
width: 70%;
}
#sidebar {
-webkit-transition: width 500ms ease;
-moz-transition: width 500ms ease;
-ms-transition: width 500ms ease;
-o-transition: width 500ms ease;
transition: width 500ms ease;
}
#nav ul li.active {
filter: alpha(opacity=100);
opacity: 1;
}
#nav ul li.last {
padding-right: 0px;
}
#nav li span {
display: inline-block;
font-size: 14px;
font-size: 1.4rem;
height: 0;
opacity: 0;
overflow: hidden;
padding-left: 10px;
width: 0;
}
.btn-navbar {
cursor: pointer;
filter: alpha(opacity=40);
float: left;
margin: 20px 5px 10px;
opacity: .4;
padding: 7px 10px;
}
.btn-navbar .icon-bar {
background-color: #F5F5F5;
border-radius: 1px 1px 1px 1px;
box-shadow: none;
display: block;
height: 2px;
width: 18px;
}
/* Expanded Nav Styling */
.expanded #container {
left: 100px;
transform: translate3d(50px, 0px, 0px) scale3d(1, 1, 1);
}
.expanded #sidebar {
width: 150px;
}
.expanded #nav li {
width: 90%;
}
.expanded #nav li span {
display: inline-block;
height: auto;
opacity: 1;
overflow: visible;
width: auto;
}
If you need more info, let me know and I'll edit the post.
use transition-delay maybe?
Fiddle (moved revelant css classes to bottom)
#nav li span {
display: inline-block;
font-size: 14px;
font-size: 1.4rem;
height: 0;
opacity: 0;
overflow: hidden;
padding-left: 10px;
width: 0;
transition:opacity 0.5s ease; // ease opacity
}
.expanded #nav li span {
display: inline-block;
height: auto;
opacity: 1;
overflow: visible;
width: auto;
transition-delay: 500ms; //delay transition by the same amount of sidebar width transition time
}
the problem is that you expanded container is too small to position the headlines correct, make it a bit larger and it will work
.expanded #sidebar {
width: 180px;
}