I want to make the sidebar on my website only visible on large screen devices, and to be hidden by default in small and medium size devices and make a button to show it, I want the same behavior of this site : .html
I've make this code :
HTML :
<template>
<div id="app">
<div class="main-container">
<div class="side-panel">
<div class="side-panel bg-golden h-100">
<div class="container h-100">
<div class="row h-100 pt-5 justify-content-center align-items-center">
<div class="col-12 text-center text-secondary">
<h5>AYMAN TARIG</h5>
<ul class="list-group pt-5 pb-4">
<li class="list-group-item bg-transparent">HOME</li>
<li class="list-group-item bg-transparent">ABOUT</li>
<li class="list-group-item bg-transparent">ARTICLES</li>
<li class="list-group-item bg-transparent">CONTACT</li>
</ul>
<div id="footer">
<h6 class="pt-5">Copyright ©2019 All rights reserved | Ayman Tarig</h6>
<h6 class="pt-4">
<i class="fab fa-facebook-f p-2"></i>
<i class="fab fa-google-plus-g p-2"></i>
</h6>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<div id="background" class="h-100">
<div class="container p-5 h-100">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-12">
<h3 class="text-center text-dark pt-4">AYMAN TARIG</h3>
<h6
class="text-center text-secondary pb-4"
>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium, voluptatem sit? Nihil architecto deserunt, consequuntur distinctio expedita molestiae a, provident eos tenetur nostrum odit. Minus optio veritatis tenetur iure eos, officia dolorem sit obcaecati aliquam, ipsum beatae atque. Dolor, deleniti!</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
CSS :
<style scoped>
.main-container {
display: flex;
align-items: stretch;
min-height: 100vh;
}
h1 {
text-decoration: underline #3a3939;
}
#background {
background: url("./imgs/80911.jpg");
background-size: cover;
}
h2 > i {
cursor: pointer;
}
.side-panel {
position: fixed;
height: 100vh;
width: 25%;
}
ul {
list-style: none;
}
li:hover {
background-color: #eeeeee !important;
color: #02131f !important;
}
i:hover {
color: #ffffff;
}
.bg-golden {
background-color: #02131f;
}
.content {
width: 100%;
margin-left: 25%;
}
@media (max-width: 540px) {
.main-container {
display: block;
flex-wrap: wrap;
}
.content {
width: 100%;
margin-left: 0;
}
.side-panel {
position: static;
width: 100%;
min-height: 250px;
height: auto;
}
#footer {
display: none;
}
}
</style>
Can anyone help me to change my code and achievement
I want to make the sidebar on my website only visible on large screen devices, and to be hidden by default in small and medium size devices and make a button to show it, I want the same behavior of this site : https://colorlib./preview/theme/elen/index.html
I've make this code :
HTML :
<template>
<div id="app">
<div class="main-container">
<div class="side-panel">
<div class="side-panel bg-golden h-100">
<div class="container h-100">
<div class="row h-100 pt-5 justify-content-center align-items-center">
<div class="col-12 text-center text-secondary">
<h5>AYMAN TARIG</h5>
<ul class="list-group pt-5 pb-4">
<li class="list-group-item bg-transparent">HOME</li>
<li class="list-group-item bg-transparent">ABOUT</li>
<li class="list-group-item bg-transparent">ARTICLES</li>
<li class="list-group-item bg-transparent">CONTACT</li>
</ul>
<div id="footer">
<h6 class="pt-5">Copyright ©2019 All rights reserved | Ayman Tarig</h6>
<h6 class="pt-4">
<i class="fab fa-facebook-f p-2"></i>
<i class="fab fa-google-plus-g p-2"></i>
</h6>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<div id="background" class="h-100">
<div class="container p-5 h-100">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-12">
<h3 class="text-center text-dark pt-4">AYMAN TARIG</h3>
<h6
class="text-center text-secondary pb-4"
>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium, voluptatem sit? Nihil architecto deserunt, consequuntur distinctio expedita molestiae a, provident eos tenetur nostrum odit. Minus optio veritatis tenetur iure eos, officia dolorem sit obcaecati aliquam, ipsum beatae atque. Dolor, deleniti!</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
CSS :
<style scoped>
.main-container {
display: flex;
align-items: stretch;
min-height: 100vh;
}
h1 {
text-decoration: underline #3a3939;
}
#background {
background: url("./imgs/80911.jpg");
background-size: cover;
}
h2 > i {
cursor: pointer;
}
.side-panel {
position: fixed;
height: 100vh;
width: 25%;
}
ul {
list-style: none;
}
li:hover {
background-color: #eeeeee !important;
color: #02131f !important;
}
i:hover {
color: #ffffff;
}
.bg-golden {
background-color: #02131f;
}
.content {
width: 100%;
margin-left: 25%;
}
@media (max-width: 540px) {
.main-container {
display: block;
flex-wrap: wrap;
}
.content {
width: 100%;
margin-left: 0;
}
.side-panel {
position: static;
width: 100%;
min-height: 250px;
height: auto;
}
#footer {
display: none;
}
}
</style>
Can anyone help me to change my code and achievement
Share Improve this question edited Apr 28, 2019 at 9:29 marc_s 757k184 gold badges1.4k silver badges1.5k bronze badges asked Mar 28, 2019 at 8:08 Ayman TarigAyman Tarig 1911 gold badge4 silver badges12 bronze badges 5- 1 What have you tryed? No one is going to help you if you just one someone to make it for you... For a start, I would suggest you to play with transition property of css and the @media you already have used – Mikel Ferreiro Commented Mar 28, 2019 at 8:18
- I actually don't know how to make that , I'm still learning @MikelFerreiro – Ayman Tarig Commented Mar 28, 2019 at 8:20
- Did you try to research first about @media and transition in css? – Francis G Commented Mar 28, 2019 at 8:24
- You might find this link pretty useful for learning how to make that behavior. Try that and if you have any questions we will help you @AymanTarig – Mikel Ferreiro Commented Mar 28, 2019 at 8:27
- See this question: stackoverflow./questions/48996084 – Carol Skelly Commented Mar 28, 2019 at 11:04
2 Answers
Reset to default 2I'm working on something similar, you will need to adjust the code to meet your need:
Edit: Sidebar fixed position.
/* JS */
var sidebar = $("#sidebar");
var hamburger = $('#navTrigger');
hamburger.click(function(e) {
e.preventDefault();
$(this).toggleClass('is-active');
// This will add `sidebar-opened`
$('#wrapper').toggleClass("sidebar-opened");
// Remove magin left
sidebar.toggleClass('ml-0');
});/* CSS */
body {
overflow-x: hidden;
}
/* Sidebar */
#sidebar {
-webkit-transition: margin .25s ease-out;
transition: margin .25s ease-out;
padding: 15px;
width: 250px;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 999;
}
#content {
-webkit-transition: margin .25s ease-out;
transition: margin .25s ease-out;
}
.sidebar-opened #content {
margin-left: 250px;
}
@media (max-width: 992px) {
#sidebar {
margin-left: -251px;
}
}
@media (min-width: 992px) {
#content {
margin-left: 250px;
}
}
/* Hamburger Menu */
.nav-trigger {
cursor: pointer;
width: 45px;
height: 45px;
padding: 1rem;
display: inline-block;
z-index: 999;
position: absolute;
right: -45px;
top: 0;
}
.nav-trigger:hover .hamburger {
transition: transform 50ms;
transform: scale(.95);
}
.nav-trigger .hamburger {
position: relative;
width: 45px;
height: 45px;
transition: transform 500ms ease-in-out;
}
.nav-trigger .hamburger::before,
.nav-trigger .hamburger::after,
.nav-trigger .hamburger .hamburger-icon {
content: '';
position: absolute;
width: 25px;
height: 2px;
background: #222;
transform-origin: 100% 50%;
transition: transform .5s;
}
.nav-trigger .hamburger::before {
top: 5px;
}
.nav-trigger .hamburger::after {
top: 17px;
}
.nav-trigger .hamburger .hamburger-icon {
width: 25px;
top: 11px;
transform-origin: 50% 50%;
}
.nav-trigger.is-active .hamburger::before,
.nav-trigger.is-active .hamburger::after,
.nav-trigger.is-active .hamburger .hamburger-icon {
background: #222;
}
.nav-trigger.is-active .hamburger::before {
transform: translate3d(-5px, 0px, 0) rotateZ(-45deg);
}
.nav-trigger.is-active .hamburger .hamburger-icon {
transform: rotateY(-90deg);
}
.nav-trigger.is-active .hamburger::after {
transform: translate3d(-5px, 5px, 0) rotateZ(45deg);
}
/* Navbar */
.navbar-link {
padding: .5rem 1rem;
display: block;
color: #fff
}
.navbar-link:hover {
background-color: #eeeeee;
color: #02131f;
text-decoration: none;
}
i:hover {
color: #fff;
}
/* Content */
.bg-golden {
background-color: #02131f;
color: #fff
}
.bg-fullscreen {
background-image: url(https://via.placeholder./1280x720.png/DCDCDC/fff);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
position: relative;
background-attachment: scroll;
}<script src="https://code.jquery./jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn./bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn./bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome./releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<div id="app">
<div class="main-container" id="wrapper">
<div class="d-flex vh-100">
<!-- Sidebar -->
<aside id="sidebar" class="side-panel d-flex flex-column h-100 bg-golden">
<!-- d-lg-none will hide the button on medium and large screens -->
<a id="navTrigger" class="d-lg-none nav-trigger" role="button" title="sweet hamburger">
<span class="hamburger">
<span class="hamburger-icon"></span>
</span>
</a>
<h5 class="sidebar-heading mt-5">AYMAN TARIG</h5>
<ul class="navbar-nav bd-navbar-nav py-5">
<li class="nav-item"><a class="navbar-link" href="#">HOME</a></li>
<li class="nav-item"><a class="navbar-link" href="#">ABOUT</a></li>
<li class="nav-item"><a class="navbar-link" href="#">ARTICLES</a></li>
<li class="nav-item"><a class="navbar-link" href="#">CONTACT</a></li>
</li>
</ul>
<div id="footer" class="mt-auto">
<small class="">Copyright ©2019 All rights reserved | Ayman Tarig</small>
<p class="pt-4">
<i class="fab fa-facebook-f p-2"></i>
<i class="fab fa-google-plus-g p-2"></i>
</p>
</div>
</aside>
<!-- Content -->
<div id="content" class="w-100">
<!-- seciton 1 -->
<div id="background" class="bg-fullscreen h-100">
<div class="container p-5 d-flex h-100">
<div class="row justify-content-center align-items-center">
<div class="col-12">
<h3 class="text-center text-dark pt-4">AYMAN TARIG</h3>
<h6 class="text-center text-secondary pb-4">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium, voluptatem sit? Nihil architecto deserunt, consequuntur distinctio expedita molestiae a, provident eos tenetur nostrum odit. Minus optio veritatis tenetur iure eos,
officia dolorem sit obcaecati aliquam, ipsum beatae atque. Dolor, deleniti!</h6>
</div>
</div>
</div>
</div>
<!-- seciton 2 -->
<div class="section-2 bg-warning" style="height: 1000px">
<div class="container p-5 d-flex h-100 text-center">
<div class="row justify-content-center align-items-center">
<div class="col-12">
<h2 class="display-4">Another section</h2>
<h6 class="lead">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium, voluptatem sit? Nihil architecto deserunt, consequuntur distinctio expedita molestiae a, provident eos tenetur nostrum odit. Minus optio veritatis tenetur iure eos,
officia dolorem sit obcaecati aliquam, ipsum beatae atque. Dolor, deleniti!</h6>
</div>
</div>
</div>
</div>
<!-- seciton 3 -->
<div class="section-3 bg-info" style="height: 1000px">
<div class="container p-5 d-flex h-100 text-center">
<div class="row justify-content-center align-items-center">
<div class="col-12">
<h2 class="display-4">Another section</h2>
<h6 class="lead">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusantium, voluptatem sit? Nihil architecto deserunt, consequuntur distinctio expedita molestiae a, provident eos tenetur nostrum odit. Minus optio veritatis tenetur iure eos,
officia dolorem sit obcaecati aliquam, ipsum beatae atque. Dolor, deleniti!</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>If you are targeting mobile devices with @media (max-width: 540px), then add display: none in the .side-panel definition.
Else, add a new media query
@media (max-width: 375px) {
.side-panel {
position: absolute;
display: none;
}
}
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745613366a4636083.html
评论列表（0条）