i made a slidermenu, but i failed some stuff. I dont know how to make it sticky. but the biggest problem is that it looks wheird when i add it to my main file. it works fine when i run the slidebar on a clear page but when i implemnt it into this file it looks crazy. the sysmbols r not infront of the text anymore. can anyone tell me how i can add the slidermenu to this file right
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<script src="../js/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="../css/stylesearch.css">
<link rel="icon" href="../images/logo.ico">
<link rel="stylesheet" href="../css/slidebar.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Search</title>
</head>
<body>
<div id="background-box" onclick="tag()"></div>
<div class="container" id="tag-box">
<div><a class="close-box" onclick="tag(), getValue()">×</a></div>
<br>Selectable Tags:</br>
</div>
<nav>
<script src="../js/slidebar.js"></script>
<a href = "#"><img class="image-size" src="../images/logo.png"></a>
<div class="bars"><i class="fa fa-bars fa-4x" id="scale" onclick="slidebar()"></i></div>
<a><img class="image-size" src="../images/menu.png" onclick=""></a>
<button id="btnabout" onclick="tag()">Tags</button>
<div class="search_box"><input type="text" name="box" id="search_text" placeholder="Search by name" class="form-control" /></div>
<div id="background-boxtitle" onclick="tag()"></div>
</nav>
<section class="sec1">
<div class="slidebar" id="slidebar"><?php include '../db/slidebar.php'; echo $slidebarbutton;?></div>
</section>
<section class="sec2">
<script src="../js/search.js"></script>
<div id="result"></div>
<div style="clear:both"></div>
</section>
<section class="sec3">
</section>
</body>
</html>
:root {
--slidermenu-color: #303030;
}
#slidebar{
position:absolute;
left:-15%;
width: 15%;
height: 100%;
transition: .5s;
background: var(--slidermenu-color);
overflow: scroll;
overflow-x: hidden;
}
#slidebar.active{
left: 0%;
}
#slidebarlock{
position: absolute;
left: -100%;
width: 85%;
height: 100%;
background: transparent;
transition: .5s;
}
#slidebarlock.active{
left: 15%;
}
.slidebarbutton {
background-color: #303030;
border: none;
color: white;
text-align: left;
text-decoration: none;
display: inline-block;
font-size: 30px;
cursor: pointer;
padding: 20px 0px;
width: 100%;
}
.slidebarbutton:hover{
background-color: #494949;
}
.bars:hover{
cursor: pointer;
}
.slidebarbutton div i{
padding-left:20px;
padding-right: 40px;
}
#slidebar::-webkit-scrollbar {
width: 5px;
}
#slidebar::-webkit-scrollbar-track {
background: var(--slidermenu-color);
}
#slidebar::-webkit-scrollbar-thumb {
background: transparent;
}
#slidebar:hover::-webkit-scrollbar-thumb{
background: black;
opacity: .8;
border-radius: 30px;
}
body{
margin: 0;
padding: 0;
font-family: sans-serif;
background: #222;;
}
header{
padding: 10px 100px;
box-sizing: border-box;
}
section{
width: 100%;
height: 100vh;
}
section.sec1{
width: 100%;
height: 50px;
}
div.gallery:hover {
border: 2px solid #404040;
background: #404040;
}
div.gallery {
margin: 5px;
border: 2px solid #222;
float: left;
width: 215px;
height: 400px;
color: #fff;
}
div.gallery img {
width: 100%;
height: 80%;
}
div.desc {
padding: 15px;
text-align: center;
}
section.sec3{
padding: 100px;
box-sizing: border-box;
height: auto;
}
section.sec3 h2{
font-size: 3em;
margin:0;
padding: 0;
color: #fff;
}
nav{
width: 100%;
height: 120px;
background: url(../images/bg1.jpg);
position: sticky;
top: 0px;
}
nav ul{
display: flex;
}
.image-size{
position: absolute;
top: 10%;
right: 1%;
height: 40px;
}
.search_box{
position: absolute;
top: 20%;
left: 50%;
transform: translate(-150%, -50%);
height: 20px;
}
.search_box input[type="text"]{
width: 300%;
padding: 20px;
padding-right: 60px;
box-sizing: border-box;
background: rgba(0,0,0,0.3);
border: 2px solid #fff;
border-radius: 10px;
font-size: 18px;
color: #fff;
outline: none;
}
.fa-search{
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 25px;
color: #fff;
font-size: 25px;
}
::-webkit-input-placeholder {
color: #fff;
}
::-moz-placeholder {
color: #fff;
}
:-ms-input-placeholder {
color: #fff;
}
@media screen and (max-width: 425px){
.search_box{
width: 95%;
}
}
#tag-box{
position: absolute;
top: -120%;
left: 20%;
width: 60%;
height: 500px;
background: #000;
transition: .5s;
opacity: 0.9;
border-radius: 30px;
}
#tag-box.active{
top: 25%;
}
.container{
max-width: 60%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.container div{
margin: 5px;
}
.container div a{
font-size: 2em;
margin:0;
padding: 0;
color: #fff;
cursor: pointer;
}
.container div a:hover{
color: #f00;
}
.container div label{
cursor: pointer;
}
.container div label input[type="checkbox"]{
display: none;
}
.container div label span{
position: relative;
display: inline-block;
background: #424242;
color: #fff;
padding: 5px 10px;
color: 555;
text-shadow: 0 1px 4px rgba(0,0,0,.5);
border-radius: 15px;
font-size: 12px;
transition: 0.5s;
user-select: none;
overflow: hidden;
border: 2px solid #FFA500;
}
.container div label span:before{
content: '';
position: absolute;
top: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%
}
.container div label input[type="checkbox"]:checked ~ span{
background: #FFA500;
color: #fff;
border: 2px solid #FFA500;
box-shadow: 0 2px 15px #FFA500;
}
#background-box {
position: absolute;
top: -120%;
left: 0%;
width: 100%;
height: 100%;
background: #000;
opacity: 0;
}
#background-box.active{
top: 0%;
}
#background-boxtitle {
position: absolute;
top: -120%;
left: 0%;
width: 100%;
height: 100%;
background: #000;
opacity: 0;
}
#background-boxtitle.active{
top: 0%;
}
#scale{
transition: .5s;
color:white;
transform: translate(22px, 16px);
}
#scale.active{
transition: .5s;
transform: translate(22px, 16px) rotate(90deg);
}
Aucun commentaire:
Enregistrer un commentaire