طراحی منو راست چین فارسی با html ، CSS و jQuery
در این مقاله نحوه طراحی منو نوار کناری راست چین با استفاده از HTML CSS و کد جاوا اسکریپت را خواهید آموخت. مانند نوار منوی ناوبری، منوی نوار کناری در بسیاری از وب سایت ها استفاده می شود.
می توانید با استفاده از کدهای برنامه نویسی HTML CSS و جاوا اسکریپت یک منوی جانبی خوب ایجاد کنید.
این یک نوار منوی کناری بسیار ساده فارسی است. ما ۷ آیکن با متن داریم . من آیکون ها را به هر منو اضافه کردم و جلوه های شناور را به آیتم های منو اضافه کردم.
وقتی روی آیتم های منو کلیک می کنید یا ماوس را حرکت می دهید، منوها باز می شوند.
کدهای طراحی منو راست چین فارسی
در ابتدا فایل index.html خود را با موارد زیر پر می کنیم :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Side Menu</title> <!-- css --> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="navigation"> <ul> <li class="list active"> <a href="#Home"> <span class="icon"> <ion-icon name="home-outline"></ion-icon> </span> <span class="title">خانه</span> </a> </li> <li class="list"> <a href="#Profile"> <span class="icon"> <ion-icon name="person-outline"></ion-icon> </span> <span class="title">داشبورد</span> </a> </li> <li class="list"> <a href="#Settings"> <span class="icon"> <ion-icon name="settings-outline"></ion-icon> </span> <span class="title">تنظیمات</span> </a> </li> <li class="list"> <a href="#Help"> <span class="icon"> <ion-icon name="help-outline"></ion-icon> </span> <span class="title">سوالات</span> </a> </li> <li class="list"> <a href="#Messages"> <span class="icon"> <ion-icon name="chatbubbles-outline"></ion-icon> </span> <span class="title">پیام ها</span> </a> </li> <li class="list"> <a href="#Contact"> <span class="icon"> <ion-icon name="call-outline"></ion-icon> </span> <span class="title">تماس با ما</span> </a> </li> <li class="list"> <a href="#Signout"> <span class="icon"> <ion-icon name="log-out-outline"></ion-icon> </span> <span class="title">خروج</span> </a> </li> </ul> </div> <!-- js --> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script> <script src="script.js"></script> </body> </html>
بدون استفاده از کدهای Css خروجی html ما بصورت زیر خواهد بود :
حالا نوبت به استایل دهی به اجزای صفحه خود با استفاده از کدهای CSS در فایل style.Css می رسد :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
background-color: #232c33;
}
.navigation {
position: absolute;
right: 0;
height: 100vh;
width: 55px;
background-color: #2b343b;
box-shadow: -10px 0 0 #4187f6;
overflow-x: hidden;
transition: all .4s linear;
transform-origin: left center;
}
.navigation:hover {
width: 300px;
}
.navigation ul li {
position: relative;
width: 100%;
margin-top: 20px;
direction: rtl;
}
.navigation ul li:hover {
background-color: #202c36;
}
.navigation ul li.active {
background-color: #4187f6;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
.navigation ul li a {
position: relative;
width: 100%;
display: flex;
text-decoration: none;
color: #fff;
}
.navigation ul li.active a::before {
content: "";
position: absolute;
left: 0;
top: -30px;
background-color: #2b343b;
width: 30px;
height: 30px;
border-radius: 50%;
box-shadow: -15px 15px 0 #4187f6;
}
.navigation ul li.active a::after {
content: "";
position: absolute;
left: 0;
bottom: -30px;
background-color: #2b343b;
width: 30px;
height: 30px;
border-radius: 50%;
box-shadow: -15px -15px 0 #4187f6;
}
.navigation ul li a .icon {
position: relative;
display: block;
min-width: 60px;
height: 60px;
line-height: 70px;
text-align: center;
}
.navigation ul li a .icon ion-icon {
position: relative;
font-size: 1.5em;
z-index: 1;
}
.navigation ul li a .title {
position: relative;
display: block;
padding-left: 10px;
height: 60px;
line-height: 60px;
white-space: nowrap;
font-family: sans-serif;
font-size: 22px;
}
در پایان هم از مقداری کد JQuery در فایل script.js استفاده می کنیم.
$(document).ready(function(){
const listItems = $(".list");
listItems.each(function(){
$(this).on("click", function(){
if(listItems.hasClass("active")){
listItems.removeClass("active");
}
$(this).addClass("active");
});
});
});
در نهایت خروجی فرم ما بصورت ویدیوی زیر جذاب و زیبا خواهد بود :
✅ تماشای پیش نمایش زنده ?? منوی نوار کناری با استفاده از HTML CSS
امیدواریم این آموزش و تکه کدها به شما در ایده اجرا و طراحی منوی نوار کناری کمک کرده باشد. شما می توانید از این لینک گیت هاب به کدهای منبع این پروژه دسترسی داشته باشید.
سلام
این کد اخر JQuery چطوری اضافه کنیم؟؟؟
سلام علی عزیز
در فایل script.js وارد کن
با استفاده از نوت پد این فایل رو ایجاد کن