umutalper11
Picopat
- Katılım
- 10 Eylül 2020
- Mesajlar
- 128
Bu şekilde bir div oluşturuyorum, ama üst kısmı navbarın altına giriyor. Margin top yapınca da üste koyduğum diğer elementleri aşağı atıyor. Kodlar şu şekilde;
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>şablon</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<link rel="stylesheet" href="assets/css/ayar.css">
<link rel="stylesheet" href="assets/css/main.css">
<script src="assets/js/jquery-3.5.1.min.js"></script>
<script src="assets/js/jquery.js"></script>
</head>
<body id="body">
<nav class="desktop">
<ul class="col-12">
<a href="#" style="text-decoration: none;"><li> ANASAYFA </li></a>
<a href="#" style="text-decoration: none;"><li> Haberler </li></a>
<a href="#" style="text-decoration: none;"><li> İLETİŞİM </li></a>
<a href="#" style="text-decoration: none;"><li> HAKKINDA </li></a>
</ul>
</nav>
<nav class="mobile">
<div class="btn">
<i class="fa fa-bars"></i>
<i class="fa fa-times"></i>
</div>
<ul class="col-12">
<a href="#" style="text-decoration: none;"><li> ANASAYFA </li></a>
<a href="#" style="text-decoration: none;"><li> Haberler </li></a>
<a href="#" style="text-decoration: none;"><li> İLETİŞİM </li></a>
<a href="#" style="text-decoration: none;"><li> HAKKINDA </li></a>
</ul>
</nav>
<center> <div id="slider" style="border: 1px solid red;">
</div> </center>
<link rel="stylesheet" href="fontawesome/css/all.css">
</body>
</html>
CSS:
nav {
user-select: none; /* kullanıcının mouse unu getirip seçim yapmasını önlüyoruz */
font-family: 'Roboto', sans-serif;
}
ul {
list-style-type:none;
}
.mobile, .btn{
display: none;
}
nav.desktop {
padding-right: 100px;
background-color: #141618;
}
nav.desktop, nav.mobile {
top: 0;
width: 100%;
height: 60px;
position: fixed;
}
nav.desktop ul{
width: 50%;
height: 60px;
margin: 0 auto;
}
nav.desktop ul li {
width: 20%;
height: 100%;
float: left;
text-align: center;
padding-top: 1.2rem;
color : #FFC700;
transition: .2s ease;
}
nav.mobile ul li {
height: 100%;
text-align: center;
padding-top: 1.5rem;
color : #FFC700;
}
nav.mobile ul li a {color : #0d0e0f;}
nav.desktop ul li:hover {
background-color: rgba(224, 224, 224, .3);
color: #FFC700;
}
@media screen and (max-width:1141px){
nav.desktop {
display: none;
}
.mobile,
.btn {
display: block;
z-index: 1;
}
.btn {
position: relative;
}
nav .fa {
position: fixed;
top: 15px;
right: 25px;
color: #FFC700;
font-size: 35px;
}
.mobile ul {
margin-top: 60px;
background: #141618;
padding-bottom: 3px;
display: none;
}
.mobile ul li {
text-align: center;
padding: 20px 0;
transition: .5s ease;
}
.mobile ul li:hover {
background-color:rgba(224, 224, 224, .3);
}
.mobile ul.aktif{display: block;}
.mobile ul.deaktif{display: none;}
}
#slider {
height: 400px;
width: 900px;
z-index: 1;
}
JavaScript:
$(document).ready(function() {
$(".btn .fa-times").hide();
$(".btn .fa-bars").click(function() {
$(this).hide(200);
$(".btn .fa-times").show(200);
$(".mobile ul").addClass("aktif");
})
$(".btn .fa-times").click(function() {
$(this).hide(200);
$(".btn .fa-bars").show(200);
$(".mobile ul").removeClass("aktif");
});
});
