<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<header class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="navbar-app">
<a class="navbar-brand" href="#" title="Menu"><i class="fas fa-feather-alt"></i>PiziWEB</a>
<ul class="nav RoundBtn-A">
<li class="nav-item d-md-none">
<a class="nav-link" id="menu" href="#" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation" title="Menu"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item floatmenu">
<a class="nav-link" href="#" title="Float Menu"><i class="fas fa-align-left"></i></a>
</li>
<li class="nav-item TamEkran d-none d-lg-block">
<a class="nav-link FullEkran" href="#" title="Tam Ekran"><i class="fas fa-expand"></i></a>
</li>
</ul>
</div>
<div class="navbar-user">
<div class="dropdown">
<a class="" href="#" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<img class="rounded-circle" src="https://assets.codepen.io/5905008/internal/avatars/users/default.png" width="42" height="42">
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">A</a></li>
<li><a class="dropdown-item" href="#">B</a></li>
<li><a class="dropdown-item" href="#">C</a></li>
</ul>
</div>
</div>
<div class="FloatBtnGrb RoundBtn-A">
<ul class="nav">
<li class="nav-item"><a class="nav-link" href="#" title="Yeni Mesaj"><i class="fas fa-envelope-open"></i><span class="badge bg-danger rounded-pill">40</span></a></li>
<li class="nav-item"><a class="nav-link" href="#" title="Ayarlar"><i class="fas fa-cog"></i></a></li>
</ul>
<ul class="settings-menu">
<li class="settings-menu-item"><a href="#" title="Personel Kartı"><i class="fa fa-user"></i></a></li>
<li class="settings-menu-item"><a href="#" title="Personel Kartı"><i class="fa fa-book"></i></a></li>
<li class="settings-menu-item"><a href="#" title="Personel Kartı"><i class="fa fa-user"></i></a></li>
<li class="settings-menu-item"><a href="#" title="Personel Kartı"><i class="fa fa-key"></i></a></li>
</ul>
</div>
</header>
<main>
<nav id="sidebarMenu" class="sidebar navbar collapse d-md-block bg-light">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#"><span class="nav-icon"><i class="btn-circle fa fa-th-large fa-md"></i></span>
<span class="nav-text">Home</span>
</a>
</li>
<li class="nav-item dropend">
<a class="nav-link" href="#" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<span class="nav-icon"><i class="btn-circle fa fa-users fa-sm"></i></span>
<span class="nav-text dropdown-toggle">Personel</span></a>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-item"><span class="nav-icon"><i class="btn-circle fas fa-users-cog fa-sm"></i></span><span class="nav-text">Persol İşlemleri</span></a></li>
<li><a href="#" class="dropdown-item"><span class="nav-icon"><i class="btn-circle fa fa-users fa-sm"></i></span><span class="nav-text">Personel A</span></a></li>
<li><a href="#" class="dropdown-item"><span class="nav-icon"><i class="btn-circle fa fa-users fa-sm"></i></span><span class="nav-text">Personel B</span></a></li>
<li><a href="#" class="dropdown-item"><span class="nav-icon"><i class="btn-circle fa fa-users fa-sm"></i></span><span class="nav-text">Personel C</span></a></li>
</ul>
</li>
<li class="nav-item dropend">
<a class="nav-link" href="#" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<span class="nav-icon"><i class="btn-circle fa fa-user fa-sm"></i></span>
<span class="nav-text dropdown-toggle">Kullanıcı</span>
</a>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-item"><span class="nav-icon"><i class="btn-circle fas fa-id-card fa-sm"></i></span><span class="nav-text">Persol Kartı</span></a></li>
<li><a href="#" class="dropdown-item"><span class="nav-icon"><i class="btn-circle fas fa-calendar fa-sm"></i></span><span class="nav-text">Görev Kartı</span></a></li>
</ul>
</li>
<li class="nav-item dropend">
<a class="nav-link" href="#" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<span class="nav-icon"><i class="btn-circle fa fa-user fa-sm"></i></span>
<span class="nav-text dropdown-toggle">Raporlar</span>
</a>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-item"><span class="nav-icon"><i class="btn-circle fa fa-users fa-sm"></i></span><span class="nav-text">Rapor A</span></a></li>
<li><a href="#" class="dropdown-item"><span class="nav-icon"><i class="btn-circle fa fa-users fa-sm"></i></span><span class="nav-text">Rapor B</span></a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#" type="button">
<span class="nav-icon"><i class="btn-circle fa fa-user fa-sm"></i></span>
<span class="nav-text">İstatistikler</span>
</a>
</li>
</ul>
</nav>
<div id="content" class="content">
<p id="d1"></p>
<p id="d2"></p>
<hr />
<p> Dashboard ve SideNav Uygulama Örneğim,
Umarım Yazılımcı arkadaşlar bir faydam dokunur...</p>
<p> Kullandığım Bootstrap 5.0 ve JQuery 3.6 Uyumsuzluğu nedeniyle Uygulamayı
kendi yazılım programında deneyiniz...</p>
<hr />
<footer>
<p>ŞAHİN YAZILIM EVİ © - ASP.NET Uygulamam</p>
</footer>
</div>
</main>
<script>
$(function () {
$(".FullEkran").on("click", function () {
// Tam ekran için simge değiştir.
$(".FullEkran i").toggleClass("fas fa-expand fas fa-compress");
// Tam ekrana geçiş
if (!document.fullscreenElement && !document.mozFullScreenElement
&& !document.webkitFullscreenElement && !document.msFullscreenElement) {
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else { // Tam ekrandan çıkış
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
})
})
// Float Menu Float Button ile Açılır/Kapanır
$(".settings-menu").slideToggle(500);
});
$(".settings-menu-item a").on("click", function () {
// Float Menu Float alt menu tuşlarından birisine basıldığında açıksa Kapanır
$(".settings-menu").slideToggle(500);
});
$(".floatmenu a").on("click", function () {
// css kodu değiştirme
$(".floatmenu i").toggleClass("fas fa-align-left fas fa-align-right");
content.classList.toggle("Flat");
sidebarMenu.classList.toggle("Flat");
menu.classList.toggle("Flat"); //Menu gizleme/gösterme butonunu Flat Menü aktif iken gizleme
});
});
</script>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
list-style: none; /*list-style: none; kullanımı listelemede görünen . işaretini yok eder */
text-decoration: none;
}
body {
display: flex;
flex-wrap: nowrap;
overflow-x: hidden;
overflow-y: auto;
}
header,
header nav {
position: fixed;
padding: 0 5px;
height: 60px;
width: 100%;
left: 0;
top: 0;
}
/** Navbar */
header .navbar-app {
position: absolute;
display: flex;
}
header .navbar-user {
position: absolute;
right: 130px;
}
header .navbar-user div ul {
/* position: absolute; bu özellik ile cep modunda menu aşağıya açılıyor */
position: absolute;
list-style: none;
margin-top: 10px !important;
margin-left: -100px;
z-index: 100;
}
header .FloatBtnGrb {
position: absolute;
display: inline-block;
right: 10px;
}
/* FloatBtnGrb-right settings menu */
header .FloatBtnGrb .settings-menu {
position: absolute;
display: none;
width: auto;
height: auto;
top: 60px;
right: 2px;
/* list-style: none; kullanımı listelemede görünen . işaretini yok eder */
list-style: none;
}
header .LoginOff {
position: absolute;
display: inline-block;
right: 10px;
}
.main {
position: absolute;
padding: 5px 5px;
width: 100% !important;
height: 100% !important;
}
#content {
margin-top: 20px;
margin-left: 230px;
padding: 10px !important;
}
#content.Flat {
margin-left: 70px;
}
/** Sidebar */
.sidebar, #sidebarMenu {
position: fixed;
display: inline-block;
flex-direction: column !important;
float: left;
margin-top: 60px;
padding: 15px 0;
width: 220px;
height: 100% !important;
overflow: visible;
z-index: 1000; /* Behind the navbar */
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
border-right: 0, 5px solid #e5e5e5;
-webkit-transition: width 0.05s linear;
transition: width 0.05s linear;
-webkit-transform: translateZ(0) scale(1, 1);
}
.sidebar.Flat {
width: 70px;
overflow: hidden;
}
.sidebar.Flat:hover {
width: 220px;
overflow: visible;
}
.sidebar li,
.sidebar li a,
.sidebar li log-Off,
.sidebar.Flat li, .sidebar.Flat li a {
height: 60px;
color: #333;
text-decoration: none;
-webkit-transform: translateZ(0) scale(1, 1);
-webkit-transition: all 0.1s linear;
transition: all 0.1s linear;
}
.sidebar li:hover > a,
.sidebar.Flat li:hover > a,
.sidebar li:focus > a,
.sidebar.Flat li:focus > a,
.sidebar li:active > a,
.sidebar.Flat li.active > a .sidebar .dropdown-menu > .active > a:hover,
.sidebar.Flat .dropdown-menu > .active > a:hover {
color: #fff;
background-color: #5fa2db;
}
.sidebar li .nav-icon,
.sidebar.Flat li .nav-icon {
position: relative;
display: table-cell;
width: 70px;
padding: 0 3px;
flex-direction: column;
justify-content: center;
align-items: center;
vertical-align: central;
text-align: center !important;
font-size: 22px;
}
.sidebar li .nav-text,
.sidebar.Flat li .nav-text {
position: relative;
display: table-cell;
width: 150px;
padding-left: 12px;
vertical-align: middle;
font-size: 18px;
}
.sidebar li ul,
.sidebar.Flat li ul {
width: 230px;
}
.btn-circle {
height: 42px;
width: 42px;
line-height: 42px;
border: 2px solid #585f66;
border-radius: 50%;
color: darkslategrey;
/* flex-direction: column;
justify-content: center;
align-items: center;
vertical-align: central;
text-align: center !important;
text-decoration: none;*/
background-color: whitesmoke;
box-shadow: 0 0 3px gray;
}
@media (max-width: 993px) {
#menu.Flat, header .navbar-app a, .navbar-app .floatmenu {
/* Menu gizleme/gösterme butonunu Flat Menü aktif iken gizleme */
display: none;
}
#content {
margin-left: 0;
}
.sidebar.Flat {
display: block;
}
}
/* button tasarımı - Start */
.RoundBtn-A li a,
button i {
position: relative;
display: flex;
height: 50px;
width: 50px;
margin: 3px 5px;
background: rgb(214, 214, 214);
border-radius: 50%;
transition: 0.2s;
}
.RoundBtn-A li a:hover {
transform: scale(1.1);
}
.RoundBtn-A li a::before {
content: "";
position: absolute;
height: 80%;
width: 80%;
background: rgb(214, 214, 214);
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.RoundBtn-A li a:hover::before {
box-shadow: inset -7px -7px 20px 0 rgba(255, 255, 255, 1),
inset 7px 7px 20px 0 rgba(0, 0, 0, 0.3);
}
.RoundBtn-A li a i {
position: absolute;
flex-direction: column;
justify-content: center;
align-items: center;
vertical-align: central;
text-align: center;
color: rgb(42, 42, 42);
font-size: 30px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: 0.2s;
}
.RoundBtn-A li a i:hover {
/* mouse üzerine geldiğinde */
color: rgb(62, 62, 62);
font-size: 28px;
}
.RoundBtn-A li a i:active {
/* tıklandığında/aktif olduğunda */
color: rgb(0, 0, 0);
font-size: 28px;
}
.RoundBtn-A li a .badge {
position: absolute;
margin: 6px auto;
font-size: 8px;
z-index: 1001;
}
/* button tasarımı - END */
