fekre-bekr,learning,source,سورس,سورس رایگان,آموزش,اخبار,فناوری اطلاعات,mvc,.net,ساری,آموزشگاه,asp.net,c#.net,programing,c++,vb,آموزش برنامه نویسی,دانلود

اشتراک در سایت


مطالب تصادفی
اخبار و مقالات در فکر بکر آموزش ایجاد مگا منو

مگا منو برای سایتهایی که دارای موضوعات زیادی در قسمت دسته بندی مطالب هستند بسیار پر کاربرد می باشد چرا که با توجه به عرض زیاد مگا ...


اخبار و مقالات در فکر بکر آموزش نحوه فارسی سازی kendo ui 2016

این روزها استفاده از کامپوننت kendo ui از محصولات شرکت تلریک در میان برنامه نویسان مورد توجه خاصی قرار گرفته است بنابراین تصمیم گ ...


اخبار و مقالات در فکر بکر فایل pdf آموزش کامپوننت Backgroundworker برای برنامه نویسی بصورت همزمان

با استفاده از کامپوننت BackgroundWorker شما میتوانید به برنامه نویسی و اجرای کارهای زمانبر در یک Thread دیگر و بصورت موازی بپرداز ...


اخبار و مقالات در فکر بکر بررسی نکات امنیتی در آپلود تصاویر

در ادامه مطلب برای شما کاربران عزیز کلاسی را تهیه نمودم تا با کمک آن بتوانید تصاویر دریافتی را با چک کردن موارد کامل امنیتی آپلود ...


اخبار و مقالات در فکر بکر حل تمرین مسائل برنامه نویسی از بخش رویدادهای کیبورد (Windows Form) در سی شارپ

در این برنامه سوال مرتبط با تایپ حروف و نمایش آن در کنترل لیبل با توجه به رویدادهای صفحه کلید حل شده است لطفا به ادامه مطلب مراجع ...


اخبار و مقالات در فکر بکر آشنایی با SignalR در Asp.net core

در این آموزش به ساخت یک برنامه real-time با استفاده از SignalR در Asp.net core 2.1 خواهیم پرداخت. ...


اخبار و مقالات در فکر بکر حل تمرین مسائل برنامه نویسی از بخش کنترل ها (Windows Form) در سی شارپ

جهت مشاهده سوال و دانلود سورس آن لطفا به ادامه مطلب توجه نمایید. ...


اخبار و مقالات در فکر بکر آموزش نحوه استفاده از Ckeditor با قابلیت آپلود تصاویر در Asp.net mvc

ckeditor یک ویرایشگر قدرتمند جهت ایجاد متون با جلوه های خاص و هینطور درج تصاویر و بسیاری از قابلیتهای دیگری میباشد که مورد توجه ب ...


اخبار و مقالات در فکر بکر آموزش ساخت صفحه Page Not Found (404) در Aspnet core

در این بخش به اموزش نحوه مدیریت خطا و هدایت کاربر به صفحه Page Not Found (404) در Aspnet core می پردازیم. یکی از مشکلات مهمی ک ...


اخبار و مقالات در فکر بکر پیاده سازی سیستم احراز هویت کاربران در Asp.net MVC (بخش دوم)

در ادامه دیتابیس و مدل برنامه را طراحی میکنیم بگونه ای که کاربران ثبت نام شده و مدیر سیستم بتوانند به صفحات خود باتوجه به نقشی ...


اخبار و مقالات در فکر بکر آموزش dependency injection در Asp.net core 2

تزریق وابستگی یکی از مباحث مبهم برای برنامه نویسانی که به تازگی با این عنوان آشنا شده اند می باشد.اما باید در نظر داشته باشید که ...


اخبار و مقالات در فکر بکر آموزش پیاده سازی UnitOfWork در Asp.net Core قسمت اول

قبل از اینکه به پیاده سازی UnitOfWork بپردازیم ، نیاز به ایجاد زیرساختهای لازم جهت استفاده از مدلهای موجود در برنامه داریم ، پیش ...


اخبار و مقالات در فکر بکر آموزش ایجاد breadcrumb با استفاده از sitemap در MVC

در این آموزش با استفاده از نقشه سایت به ایجاد و پیاده سازی breadcrumb می پردازیم. ...


اخبار و مقالات در فکر بکر آموزش رمزنگاری فایلها در asp.net core

با توجه به اینکه بسیاری از فایلهای ذخیره شده بر روی سرور از اهمیت بالایی برخوردار هستند ، بنابراین کدنویسی بخش رمزنگاری فایلها جه ...


پیوندها
5 (1)

مگا منو برای سایتهایی که دارای موضوعات زیادی در قسمت دسته بندی مطالب هستند بسیار پر کاربرد می باشد چرا که با توجه به عرض زیاد مگا منو میتوانید زیر منوهای زیادی را در آن قسمت قرار دهید. در این مقاله به آموزش ایجاد مگا منو با قابلیت رسپانسیو خواهیم پرداخت.
گروه : قالب سایت
تاریخ انتشار: 1395/08/03

فکر بکر

مگا منو برای سایتهایی که دارای موضوعات زیادی در قسمت دسته بندی مطالب هستند بسیار پر کاربرد می باشد چرا که با توجه به عرض زیاد مگا منو میتوانید زیر منوهای زیادی را در آن قسمت قرار دهید. در این مقاله به آموزش ایجاد مگا منو با قابلیت رسپانسیو خواهیم پرداخت.

ابتدا یک سند html ایجاد میکنیم .

سپس کد های خود را اغاز میکنیم در ابتدا ما باید تمام منو را در یک تگ والد قرار دهیم که در اینجا از تگ div استفاده میکنیم    و به ان کلاس با اسم nav  را میدهیم به این صورت

<div class=”nav”>  </div>

سپس کد های خود را در ان قرار میدهیم  برای منوی اصلی یک تگ ul باز میکنیم و به ان کلاس nav-ul را میدهیم  

<ul class=”nav-ul”> </ul>

حالا در تگ ul از ساختار اصلی ul استفاده میکنیم یعنی در ان برای اضافه کردن عناصر از تگ  li در درون ul استفاده میکنیم به این صورت

<li class=”li-menu”><a class=”a-menu”>خانه</a></li>

<li class=”li-menu”><a class=”a-menu”>محصولات</a></li>

<li class=”li-menu”><a class=”a-menu”>پوشاک</a></li>

 

خب در اینجا مشاهده میکنید که من به تگ ها کلاس li-menu  و a-menu را داده ام دلیل این کار این  است که بعدا در فایل css  بتوانم به ان ها استایل بدهم شاید سوال دیگری پیش بیاید که چرا در تگ li از a استفاده کرده ام دلیل این کار این است که اگر تگ a استفاده نکنیم صرفا یه متن داریم که لیست شده است نه یه منو که حالت لینک دارد برای متوجه شدن  در  ادیتور خودتان تگ a  را حذف کنید و فقط درون تگ li بنویسید محصولات... نتیجه را مشاهده کنید خب میپردازیم به ادامه بحث..!

تا اینجا منو ها را اضافه کرده ایم (فعلا کاری به css نداریم) حالا زیر منو ها را اضافه میکنیم زیر منوی اول برای این کار به انتهای تگ li و بعد تگ بسته شدن </a> را باز میکنیم (هر li که میخواهید زیر منو داشته باشد به ان کد هارا اضافه کنید) و درون آن  یه ul و li دیگر با کلاس sub   اضافه میکنیم به این صورت

            <ul class="ul-sub">

                <li class="li-sub"><a href="" class="a-sub">test1</a></li>

                <li class="li-sub"><a href="" class="a-sub">test2</a></li>

                <li class="li-sub "><a href="" class="a-sub">test3</a></li>

</ul>

 

تا اینجا ما sub  منو را اضافه کرده ایم حالا به سراغ کد های  css  میرویم ..

به تگ قبل  head  فایل css  را شناسایی میکنیم با این قطعه کد

<link rel="stylesheet" href="style.css">

در قسمت href  ادرس فایل  css  را که ساختیم میدهیم  کل کد html  تا به این لحظه 

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class=”nav”>

<ul class=”nav-ul”>

<li class=”li-menu”><a class=”a-menu”>خانه</a></li>

<li class=”li-menu”><a class=”a-menu”>محصولات</a>

            <ul class="ul-sub">

                <li class="li-sub"><a href="" class="a-sub">test1</a></li>

                <li class="li-sub"><a href="" class="a-sub">test2</a></li>

                <li class="li-sub "><a href="" class="a-sub">test3</a></li>

</ul>

 

</li>

<li class=”li-menu”><a class=”a-menu”>پوشاک</a></li>

 </ul>

  </div>

</body>

</html>

حالا  وارد فایل خودماون میشویم با ادیتور ویژوال استودیو و به کلاس  nav  استایل میدهیم به این صورت که برای صدا زدن  کلاس از علامت . استفاده میکنیم سپس کروشه باز و بسته به قطعه کد زیر دقت کنید:

.nav{}

اکنون کد های خود را درون کروشه ها مینویسیم!

.nav{

    width: 100%;

    float: right;

    background-color: #f7f8fa;

    border-bottom: 1px solid #e3e4e5;

    border-top: 1px solid #eff0f2;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);

}

در بالا ما به width مقدار 100% را دادیم تا کل عرض صفحه را بگیرد و چون معمولا عناصر سمت چپ هستن با کمک float:right ان را به سمت راست اوردیم با کمک background-color به منوی خود رنگ دادیم همچنین تگ border-bottom یک حاشیه پایینی برای زیبایی منوی ما اینجاد میکند به طول 1 px  همچنین همین کار را border-top انجام میدهد اما به سمت بالا box-shadow هم برای سایه انداخت بر حاشیه منو برای زیبا سازی میباشد خب به ادامه کد میپردازیم

.li-menu{

    list-style: none;

    float: right;

    height: 60px;

    margin-top: -16px;

    line-height: 60px;

    text-align: center;

    margin-right: 2px;

    width: 120px;

}

در کد بالا ما اگر قبل اینکه css را اضافه کنید سند html را در مرورگر دیده باشید میبینید که نقطه های سیاه کنار نوشته ها هستند برای پاک کردن انها از کد list-style:none استفاده میکنیم همچنین float در اینجا رفتاری متفاوت را از خود نشان میدهد در این کد float باعث عمودی شدن نوشته میشود margin برای فاصله دادن به عناصر میباشد line-height  برای تنظیم نوشته به صورت افقی میباشد text-align موقعیت نوشته را مشخص میکند اینکه راست باشد یا چپ یا وسط ادامه ی کد

.a-menu{

    float: right;

    width: 120px;

    text-decoration: none;

    color: #4D4D4D;

    -webkit-transition: .5s all;

    transition: .5s all;

}

در کد بالا text-decoration:none خط های زیر نوشته ها و لینک ها را از بین میبرد همچنین color رنگ نوشته ها را تعیین میکند در مورد transition  هم جلو تر میگوییم فعلا به ادامه کد میپردازیم

.a-menu:hover{

    background-color: #FFFFFF;

    color: #ff2551;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);

}

خب اگر کد transition را در کد بالاتر حذف کنید و این کد بالا را اضافه کنید میبینید که در چشم بر هم زدنی تغییرات اعمال میشود یعنی وقتی hover میکنید به صورت خیلی خشک بک گراند تغییر میکند کار transition این است که تغییرات را از حالت خشک در میاورد و یه حالت انیمیشنی به ان میدهد متد :hover هم یه سلکتور میباشد که میگوید اگر نشانه گر روی عصر مورد نظر رفت این استایل را بده مثلا در کد بالا گفته شد اگه نشانه گر روی a-menu   رفت رنگ متن را عوض کن و به ان پس زمینه بده همچنین کمی هم سایه به قسمت پایینی بده .. ادامه ی کد :

.ul-sub{

    list-style: none;

    width: 100%;

    background-color: #FFFFFF;

    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.12);

    position: absolute;

    margin-top: 48px;

    margin-left: -41px;

    display: none;

}

 در کد بالا position موقعیت عنصر را مشخص میکند به عنوان مثال absolute یعنی عنصر شناور باشد و دیگر محدود به والد خود نباشد همچنین display  نوع نمایش ان را مشخص میکند  که گزینه none به معنا نمایش ندادن عنصر است

.li-sub{

    list-style: none;

    float: right;

    height: 60px;

    line-height: 60px;

    text-align: center;

    margin-right: 2px;

    width: 120px;

}

.a-sub{

    float: right;

    width: 120px;

    text-decoration: none;

    color: #4D4D4D;

    -webkit-transition: .5s all;

    transition: .5s all;

}

.a-sub:hover{

    box-shadow: inset 0px -2px 0px  #ff2551 ;

}

در اینجا هم مانند چند خط قبل به  a و li ها استایل مخصوصشان را داده ایم

.li-menu:hover .ul-sub{

    display: block;

}

کد بالا بسیار مهم است در اینجا ما گفتیم اگر نشانه گر بر روی li-menu رفت یه استایل زیر را به ul-sub  بده display:block  متضاد display:none است یعنی نمایش بده

خب تا اینجا ما کد های منو و ساب منو را نوشتیم نوبت به مگا منو میرسد دوباره به کد های html بر میگردیم و این قطعه کد را درون یکی از li های ساب منو اضافه میکنیم

<div class="rows">

                        <table>

                            <tbody>

                            <tr>

                                <td class="td-4 "><img src="test.png" alt="" class="img"></td>

                                <td class="td-3 td">   <ul class="ul-table">

                                    <li class="title "><a href="">فکری</a></li>

                                    <li class="item li"><a href="">اسباب بازی</a></li>

                                    <li class="item li"><a href="">معما</a></li>

                                    <li class="item li"><a href="">شعر</a></li>

                                </ul><div class="clearfix"></div></td>

                                <td class="td-2 ">   <ul class="ul-table">

                                    <li class="title "><a href="">فکری</a></li>

                                    <li class="item li"><a href="">اسباب بازی</a></li>

                                    <li class="item li"><a href="">معما</a></li>

                                    <li class="item li"><a href="">شعر</a></li>

                                </ul><div class="clearfix"></div></td>

                                <td class="td-1 td">

                                    <ul class="ul-table">

                                        <li class="title "><a href="">فکری</a></li>

                                        <li class="item li"><a href="">اسباب بازی</a></li>

                                        <li class="item li"><a href="">معما</a></li>

                                        <li class="item li"><a href="">شعر</a></li>

                                    </ul>

                                    <div class="clearfix"></div>

                                    <ul class="ul-table">

                                        <li class="title "><a href="">فکری</a></li>

                                        <li class="item li"><a href="">اسباب بازی</a></li>

                                        <li class="item li"><a href="">اسباب بازی</a></li>

                                        <li class="item li"><a href="">معما</a></li>

                                        <li class="item li"><a href="">معما</a></li>

                                        <li class="item li"><a href="">شعر</a></li>

                                        <li class="item li"><a href="">شعر</a></li>

                                    </ul>

                                </td>

                            </tr>

                            </tbody>

                        </table>

                    </div>

                </li>

            </ul>

حال به شرح کد بالا میپردازیم ابتدا یک div  با عنوان  rows  ساختیم که مگا منو در ان قرار بگیرد سپس از تگ table  کمک گرفتیم تا ردیف های منو در ان باشد همچنین توسط tr  یک سطر ساختیم و در ان چهار td  قرار داده ایم که قرار است چهار بخش مگا منو ما باشند همچنین در ان ul  و li قرار داده ایم تا متن ها را به صورت لیستی نمایش دهیم حال به کد های css  برگشته و استایل ها را مینویسیم

.rows{

    width: 100%;

    background-color: red;

    height: 400px;

    margin-top: 61px;

    text-align: center;

    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.12);

    border-radius: 0px 0px 5px 5px;

    float: right;

}

در بالا border-radius  کار گرد کردن لبه های تیز div را به ما میدهد 

.td-4,.td-3,.td-2,.td-1{

    background-color: #FCFCFC;

    width:800px;

    height: 400px;

}

.td-3,.td-2,.td-1{

    border-left: 1px solid #E9E9E9;

}

.td-3,.td-1{

    background-color: #f8f8f8;

}

.td-1{

    border-radius: 0px 0px 5px 0px;

}

.td-4{

    border-radius: 0px 0px 0px 5px;

}

در کد بالا ما برای td  هایی که تعریف کردیم کلاس های جداگانه گذاشتیم و به هرکدام از انها رنگ های خاصی دادیم همچنین طول و عرض ثابتی به انها دادیم

table{

    border-spacing:0px !important;

}

اگر تا الان دقت داشته باشید کل منو یه حاشیه داخلی دارد که با کد border-spacing:0px بر طرف میشود البته به یاد داشته باشید کد  !important برای اجباری کردن یه قطعه کد است و نباید همه جا استفاده شود

.ul-table{

    list-style: none;

    float: right;

    clear: both;

    margin-bottom: 35px;

    margin-top: -29px;

}

حال بر روی نوشته های درون مگا منو کار میکنیم

    font-weight: bold;

    padding-left: 15px !important;

    width: 100px;

    height: 40px;

    line-height: 40px;

    text-align: right;

    margin-right: 6px;

}

.li{

    width: 100px;

    height: 33px;

    line-height: 33px;

    text-align: right;

    margin-top: 1px;

}

.li > a{

    text-decoration: none;

}

.title > a{

    color: #42CAF4 !important;

    text-decoration: none;

}

.img {

    position: absolute;

    z-index: 0;

    margin-top: -168px;

    margin-left: -115px;

}

.li-sub:hover .rows{

    display: block;

}

 در کلاس img برای قسمت عکس مگا منو میباشد و کد  z-index  میزان بر تری ان عنصر را مشخص میکند مثلا اگر مقدار 99999 بگیرد روی همه عنصر ها میاید و اول ان نمایش داده میشود با در اینجا از  استفاده کردیم تا اگه نوشته بر روی ان امد مشخص و دیده شود

@media screen and (max-width: 850px) {

    .ul-sub {

        margin-right: -122px;

        margin-top: 91px;

    }

 

}

@media screen and (max-width: 640px){

    .img{

        display: none;

    }

}

@media screen and (max-width: 320px){

    .ul-sub {

        margin-right: -122px;

        margin-top: 136px;

    }

}

در سه قطعه کد بالا ما برای واکنشگرا کردن برای هر رزلوشنی یه استایلی نوشته شده برای این کار از کد

@media screen and (max-width: 1000px){{

استفاده میکنیم در داخل کروشه کد هایی که میخوایم اجرا شود را میگذاریم و در قسمت max-width عرض ان را برابر مقدار قرار میدهیم که میخواهیم از زیر ان عرض به بعد کد داخل کروشه اجرا شود

کد html تا اینجا :

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="style.css">

    <link rel="stylesheet" href="responsive.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

</head>

<body>

<div class="nav">  <span class="fa fa-bars c"></span>

    <ul class="nav-ul">

        <li class="li-menu"><a href="" class="a-menu">خانه</a></li>

        <li class="li-menu"><a href="" class="a-menu">محصولات</a></li>

        <li class="li-menu"><a href="" class="a-menu">تست</a></li>

        <li class="li-menu"><a href="" class="a-menu">زمین</a>

            <ul class="ul-sub">

                <li class="li-sub"><a href="" class="a-sub">test1</a></li>

                <li class="li-sub"><a href="" class="a-sub">test2</a></li>

                <li class="li-sub "><a href="" class="a-sub">test3</a>

                    <div class="rows">

                        <table>

                            <tbody>

                            <tr>

                                <td class="td-4 "><img src="test.png" alt="" class="img"></td>

                                <td class="td-3 td">   <ul class="ul-table">

                                    <li class="title "><a href="">فکری</a></li>

                                    <li class="item li"><a href="">اسباب بازی</a></li>

                                    <li class="item li"><a href="">معما</a></li>

                                    <li class="item li"><a href="">شعر</a></li>

                                </ul><div class="clearfix"></div></td>

                                <td class="td-2 ">   <ul class="ul-table">

                                    <li class="title "><a href="">فکری</a></li>

                                    <li class="item li"><a href="">اسباب بازی</a></li>

                                    <li class="item li"><a href="">معما</a></li>

                                    <li class="item li"><a href="">شعر</a></li>

                                </ul><div class="clearfix"></div></td>

                                <td class="td-1 td">

                                    <ul class="ul-table">

                                        <li class="title "><a href="">فکری</a></li>

                                        <li class="item li"><a href="">اسباب بازی</a></li>

                                        <li class="item li"><a href="">معما</a></li>

                                        <li class="item li"><a href="">شعر</a></li>

                                    </ul>

                                    <div class="clearfix"></div>

                                    <ul class="ul-table">

                                        <li class="title "><a href="">فکری</a></li>

                                        <li class="item li"><a href="">اسباب بازی</a></li>

                                        <li class="item li"><a href="">اسباب بازی</a></li>

                                        <li class="item li"><a href="">معما</a></li>

                                        <li class="item li"><a href="">معما</a></li>

                                        <li class="item li"><a href="">شعر</a></li>

                                        <li class="item li"><a href="">شعر</a></li>

                                    </ul>

                                </td>

                            </tr>

                            </tbody>

                        </table>

                    </div>

                </li>

            </ul>

        </li>

        <li class="li-menu"><a href="" class="a-menu">اسمان</a></li>

        <li class="li-menu"><a href="" class="a-menu ">ابزار و لوازم خودرو</a></li>

    </ul>

</div>

<script src="jquery-3.1.1.min.js"></script>

<script>

    $(document).ready(function () {

        $(".c").click(function () {

            $(".nav-ul").slideToggle();

        })

    })

</script>

</body>

</html>

حال فایل ایکون را اضافه میکنیم تا برا واکنشگرا ایکون باز و بسته شدن منو نمایش داده شود برای اینکار از این کدها استفاده میکنیم ابتدا فایل فونت ها را دانلود کرده سپس فایل  font-awesome.min.css را توسط خط زیر و داخل تگ body اضافه میکنیم به این صورت

    <link rel="stylesheet" href="font-awesome.min.css">

سپس باید کد های فونت را به فایل css اضافه کنیم به اول فایل css بر خواهیم گشت و این قطعه کد را اضافه میکنیم

@font-face{

    font-family:'FontAwesome';

    src:url('fonts/fontawesome-webfont.eot?v=4.4.0');

    src:url('fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'),

    url('fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'),

    url('fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'),

    url('fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'),

    url('fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');

}

خب در کد بالا ما یه فونت با نام font awesome معرفی کردیم سپس توسط کد src مکان فایل ها را به انها شناساندیم در نهایت کدfont-family: FontAwesome; را درون استایل css تگ body  مینویسیم

همچنین باید جیکوئری را اضافه کنیم ابتدا ان را دانلود سپس با این کد با اخر و قبل بسته شدن تگ body اضافه میکنیم

<script src="jquery-3.1.1.min.js"></script>

حالا یه تگ script دیگر باز میکنیم و کد های جیکوئری خود را درون ان مینویسیم

    $(document).ready(function () {

        $(".c").click(function () {

            $(".nav-ul").slideToggle();

        })

    })

 

در کد بالا ما گفتیم تا زمانی که کلاس c کلیک شد بیا با استفاده از توابع اماده slidetoggle  اگر کلاس  nav-ul باز بود ان را ببند و اگه بسته بود ان را باز کن

 

حال دوباره به فایل های ریسپانسیو css بر میگردیم تا تب مگا منو را به صورت واکنشگرا نیز نشان دهیم برای این کار در کد ریسپانسیو زیر 850 پیکسل کد های زیر را اضافه میکنیم

   .rows{

        display: none !important;

        width: 55%;

        background-color: #4D4D4D;

        float: right;

        left: 0;

        position: relative;

        right: 0;

        z-index: 9000;

        margin-right: -261px;

        margin-top: -2px;

        overflow: hidden;

 

    }

    .li-sub:hover .rows{

        display: block !important;

    }

در کد های بالا ما امدیم و برای منو استایل مخصوص تعریف نمودیم به این صورت که position را relative قرار دادیم تا عرض را نگیرد همچنین کد  !importnat  به این معنی میباشد که این قطعه کد از تمام کد های مشابه در کد های  css دیگر اولیت دارد همچنین z-index را برابر با 9000 قرار دادیم تا از همه ی عناصر صفحه بالاتر باشد

 

در نهایت برای بر طرف کردن یک سری مشکلات کوچک در رزلوشن های خاص این کد ها را در بخش ریسپانسیو اضافه میکنیم

@media screen and (max-width: 480px) {

    .rows{

        width: 70%;

        margin-right: -72px;

    }

}

@media screen and (max-width: 449px) {

    .rows{

        width: 74%;

        margin-right: -67px;

    }

}

@media screen and (max-width: 398px) {

    .rows{

        width: 86%;

        margin-right: -77px;

 

    }

}@media screen and (max-width: 320px) {

    .rows{

        width: 70%;

        margin-right: -77px;

 

    }

}

و در نهایت کد های زیر را درون فایل  jquery  خود اضافه میکنیم

          setInterval(function () {

                if (window.innerWidth >= 900) {

                    $(".nav-ul").slideDown();

                }

                if (window.innerWidth <= 900) {

 

                if (count < 1) {

                    $(".nav-ul").slideUp();

                    count++;

                }

            }

            },100)

 

 در اینجا ما گفتیم که هر 100 ثانیه چک شود  که رزلوشن چند است اگر بالاتر از 900 بود منو را باز کن و اگر پایین تر از 900 بود منو را ببند

mega menu 01

mega menu 02

موفق  باشید

این آموزش توسط شایگان آقاجانی ارسال شده است

 

شما اولین نفری باشید که نظر میدهید

8E8G5O

آموزش کار با کوکی ها (Cookie) در Asp.net core -------- آموزش رمزنگاری فایلها در asp.net core -------- مقایسه واحدهای اندازه گیری rem و em در css -------- آشنایی با مفهوم Generic در C#.net -------- نحوه خواندن اطلاعات از فایل appsetting.json در Asp.net Core -------- آموزش استفاده از CQRS و Mediator در Asp.Net Core -------- نحوه ایجاد image checkbox در html css -------- عملیات crud و WebApi در Asp.net 6 -------- آموزش ایجاد custom model binder در Asp.net core -------- آموزش استفاده از Log4net در Asp.net 5 -------- آموزش پیاده سازی UnitOfWork در Asp.net Core قسمت اول -------- پیاده سازی Repository Pattern بصورت Generic Class -------- وارد کردن فقط حروف فارسی و جلوگیری از ورود حروف فارسی در تکست باکس با استفاده از JQuery -------- سورس استفاده از کامپوننت Roxy File manager در Asp.net core -------- آموزش ساخت صفحه Page Not Found (404) در Aspnet core -------- آموزش ایجاد Tag Helper سفارشی در Asp.net core -------- آموزش نحوه ایجاد Model برای دیتابیس موجود در Entity Framework Core -------- آموزش نحوه Upload و Download در Asp.net core 2 -------- آموزش dependency injection در Asp.net core 2 -------- آموزش تحت شبکه کردن برنامه های مبتنی بر c# در sql server -------- آموزش استفاده از Bundler & Minifier در Asp.Net Core -------- مروری بر Identity در Asp.net core2.1 (بخش دوم) -------- مروری بر Identity در Asp.net core2.1 (بخش اول) -------- آموزش مبحث Single Responsibility Principle (SRP) از بخش اصول طراحی شی گرا (SOLID) -------- آموزش publish کردن برنامه های Asp.net core بر روی سرور iis -------- پیاده سازی مسیریابی با استفاده از الگوریتم پیمایش اول سطح یا جستجوی اول سطح (BFS) در سی شارپ -------- آشنایی با SignalR در Asp.net core -------- آموزش استفاده از کلاس SeedData در Asp.net Core -------- قالب سایت فروشگاهی -------- آموزش ایجاد برنامه نصب (setup) قسمت سوم -------- آموزش ایجاد برنامه نصب (setup) قسمت دوم -------- آموزش ایجاد برنامه نصب (setup) قسمت اول -------- آموزش عملیات CRUD با استفاده از Ragor Pages در Asp.net Core2.0 -------- آموزش ثبت تصویر توسط دوربین در برنامه نویسی اندروید به زبان c#.net -------- حل مساله n وزیر با استفاده از الگوریتم ژنتیک و بصورت گرافیکی -------- آموزش نمایش تصویر loading در سمت client جهت بارگزاری صفحات با حجم زیاد از سرور در asp.net mvc -------- آموزش اعتبار سنجی غیر همزمان(AsyncValidation) با استفاده از جاوااسکریپت در Asp.net mvc -------- آموزش ایجاد breadcrumb با استفاده از sitemap در MVC -------- آموزش ایجاد برنامه چت دوطرفه با استفاده از Socket در سی شارپ -------- آموزش ارسال و دریافت فایل در برنامه تحت شبکه با استفاده ار سوکت (Socket) --------

ابتدای صفحه