{
"homeurl": "https://supportwebs.ir/blog/",
"resultstype": "vertical",
"resultsposition": "hover",
"itemscount": 4,
"imagewidth": 70,
"imageheight": 70,
"resultitemheight": "auto",
"showauthor": 0,
"showdate": 0,
"showdescription": 1,
"charcount": 2,
"noresultstext": "عبارت جستجو شده پیدا نشد",
"didyoumeantext": "منظور شما این هست : ",
"defaultImage": "https://supportwebs.ir/blog/wp-content/plugins/ajax-search-pro/img/default.jpg",
"highlight": 0,
"highlightwholewords": 1,
"openToBlank": 1,
"scrollToResults": 0,
"resultareaclickable": 1,
"autocomplete": {
"enabled": 1,
"googleOnly": 1,
"lang": "en",
"mobile": 1 },
"triggerontype": 1,
"triggeronclick": 1,
"triggeronreturn": 1,
"triggerOnFacetChange": 1,
"trigger": {
"delay": 300,
"autocomplete_delay": 310 },
"overridewpdefault": 0,
"override_method": "post",
"redirectonclick": 1,
"redirectClickTo": "results_page",
"redirect_on_enter": 1,
"redirectEnterTo": "results_page",
"redirect_url": "?s={phrase}",
"settingsimagepos": "right",
"settingsVisible": 0,
"hresulthidedesc": "0",
"prescontainerheight": "400px",
"pshowsubtitle": "0",
"pshowdesc": "1",
"closeOnDocClick": 1,
"iifNoImage": "description",
"iiRows": 2,
"iiGutter": 5,
"iitemsWidth": 200,
"iitemsHeight": 200,
"iishowOverlay": 1,
"iiblurOverlay": 1,
"iihideContent": 1,
"loaderLocation": "auto",
"analytics": 0,
"analyticsString": "",
"show_more": {
"url": "?s={phrase}",
"action": "ajax"
},
"mobile": {
"trigger_on_type": 1,
"trigger_on_click": 1,
"hide_keyboard": 0 },
"compact": {
"enabled": 0,
"width": "100%",
"closeOnMagnifier": 1,
"closeOnDocument": 0,
"position": "static",
"overlay": 0 },
"animations": {
"pc": {
"settings": {
"anim" : "fadedrop",
"dur" : 300 },
"results" : {
"anim" : "fadedrop",
"dur" : 300 },
"items" : "fadeInDown"
},
"mob": {
"settings": {
"anim" : "fadedrop",
"dur" : 300 },
"results" : {
"anim" : "fadedrop",
"dur" : 300 },
"items" : "voidanim"
}
},
"autop": {
"state": "disabled",
"phrase": "",
"count": 10 }
}
13 نمونه منو سایدبار طراحی شده با CSS
در این مطلب 13 نمونه منو سایدبار که طراحی شده با استفاده از کدهای Html و Css می باشد به همراه یک آیتم جدید که به تازگی رونمایی شده است برای شما آماده کرده ایم. منظور از منو سایدبار، طراحی منو به صورتی است که در یکی از ستون های کناری صفحه قرار میگیرد.
نام طراح: Comehope – May 15, 2018 طراحی شده با: HTML / CSS
درباره کد
MENU EFFECT
این منو به نحوی طراحی شده ه با قرار گرفتن منو برروی گزینه های آن تغییر رنگ پیدا میکند.
مرورگرهای سازگار: Chrome, Firefox, Opera, Safari
واکنشگرا: بله
موارد مورد نیاز: –
نام طراح: sean_codes – May 18, 2017 دمو و کد طراحی شده با: HTML (Pug) / CSS
درباره کد
CSS ONLY NAVIGATION FOR SIDEBAR
این منو به گونه ای طراحی شده که با قرارگرفتن موس برروی آن گزینه ها افکت آینه ای پیدا میکنند.
مرورهای سازگار: Chrome, Edge, Firefox, Opera, Safari
واکنشگرا: –
نام طراح: Milica – April 17, 2017 دمو و کد طراحی شده با: (HTML / CSS (SCSS
درباره کد
CSS SIDEBAR MENU
این منو به گونه ای طراحی شده است که با قرار گرفتن موس به حالت مگامنو تبدیل میگردد.
مرورگرهای سازگار: Chrome, Edge, Firefox, Opera, Safari
موارد مورد نیاز: bootstrap.css, font-awesome.css
نام طراح: Shawn Reisner – January 12, 2017 دمو و کد طراحی شده با: (HTML / CSS (SCSS
درباره کد
PURPLE SIDEBAR MENU
این منو طراحی شده به سبک مهندسی معکوس از ساختار Hyperspace می باشد. https://html5up.net/hyperspace
مرورهای سازگار: Chrome, Edge, Firefox, Opera, Safari
موارد مورد نیاز: –
نام طراح: Stephen Scaff – August 27, 2015 دمو و کد طراحی شده با: (HTML / CSS (SCSS
درباره کد
PURE CSS FLY IN SIDEBAR NAVIGATION
این منو بسیار ساده و با راهنمای چندسطحی طراحی شده است. بعد از قرارگیری موس برروی منو سطح اول بلافاصله سطح دوم لود میشود و با تغییر گزینه سطح نیز تغییر میکند.
مرورهای سازگار: Chrome, Edge, Firefox, Opera, Safari
موارد مورد نیاز: –
نام طراح: magnificode – June 8, 2015 دمو و کد طراحی شده با: (HTML / CSS (SCSS
درباره کد
SIDEBAR NAVIGATION ANIMATION
مرورگرهای سازگار: Chrome, Edge, Firefox, Opera, Safari
موارد مورد نیاز: –
درباره کد
FIXED HOVER NAVIGATION
این منو به گونه ای طراحی شده است که در حالت فیکس در سایدبار قرار دارد و با قرارگرفتن موس منو افزایش پیدا میکند و با بازگشت موس منو به حالت فیکس تبدیل میگردد.
مرورگرهای سازگار: Chrome, Edge, Firefox, Opera, Safari
موارد مورد نیاز:–
درباره کد
FULLY RESPONSIVE CSS3 SIDEBAR MENU
این منو کاملا واکنشگرا طراحی شده است و بدون استفاده از کدهای جاواسکریپت و کمتر از 200 کدخط CSS میباشد.
مرورگرهای سازگار: Chrome, Edge, Firefox, Opera, Safari
موارد مورد نیاز: –
درباره کد
SIDEBAR SLIDING MENU CSS
این منو به حالت اسلایدی طراحی شده است بدون استفاده از فایل های JS و دارای اسکرول افقی
مرورگرهای سازگار: Chrome, Edge, Firefox, Opera, Safari
موارد مورد نیاز: –
درباره کد
3D ROTATING SIDEBAR NAVIGATION
این منو در حالت راهنمای عمودی طراحی شده است که با قرارگرفتن موس برروی گزینه ها تغییر آیکون پیدا میکنند.
مرورگرهای سازگار: Chrome, Edge, Firefox, Opera, Safari
موارد مورد نیاز: –
درباره کد
PURE CSS3 SIDEBAR MENU
این منو در حالت کرکره ای با افکت طراحی شده است.
مرورگرهای سازگار: Chrome, Edge, Firefox, Opera, Safari
موارد مورد نیاز: font-awesome.css
درباره کد
SIDEBAR MENU CSS
این منو به گونه ای طراحی شده است که با قرارگرفتن موس به حالت نمایش/مخفی تبدیل می شود.
مرورگرهای سازگار: Chrome, Edge, Firefox, Opera, Safari
موارد مورد نیاز: font-awesome.css
درباره کد
CSS SIDEBAR MENU
به راحتی میتوانید از این منوسایدبار که با CSS , Html طراحی شده است استفاده کنید.
مرورگرهای سازگار: Chrome, Edge, Firefox, Opera, Safari
موارد مورد نیاز: font-awesome.css
درباره کد
FIXED NAVIGATION HOVER EFFECT
این منو به گونه ای طراحی شده است که بخشی از گزینه های به صورت کاملا ثابت هستند و برخی گزینه های دیگر با قرارگیری موس نمایش داده میشوند.
مرورگرهای سازگار: Chrome, Edge, Firefox, Opera, Safari
موارد مورد نیاز: –
Loading...
2 دیدگاه در پست “13 نمونه منو سایدبار طراحی شده با CSS”
دوست عزیز این نمونه ها همشون سایدبار سمت چپه بهتر بود نمونه هایی را میگذاشتین که سایدبار سمت راست باشه برای زبانهای راست چین مثل فارسی
سلام دوست عزیز
با یه سری تغییرات css کاملا می تونید راست چین کنید