کد منو کشویی عکسدار

m.gh.raician
03 / 03 / 1399
کامپیوتر , RAICIAN GIF ,
1 بازدید
نظر

در اینجا برای علاقمندان وب یک منوی جالب کشویی عکسدار قرار دادم که امیدوارم خوشتون بیاد.

لازم به ذکر هست،میتوانید کلیه متنها عنوانها را به دلخواه خود تغییر دهید.

<!DOCTYPE html><html lang="en" class="no-js"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Blueprint: Horizontal Slide Out Menu</title> <meta name="description" content="Blueprint: Horizontal Slide Out Menu" /> <meta name="keywords" content="horizontal, slide out, menu, navigation, responsive, javascript, images, grid" /> <meta name="author" content="Codrops" /> <link rel="shortcut icon" href="http://rozup.ir/view/2772470/Ayeh-1.ico"> <link rel="stylesheet" type="text/css" href="http://rozup.ir/view/3146974/default.css" /> <link rel="stylesheet" type="text/css" href="http://rozup.ir/view/3146965/component.css" /> <script src="http://rozup.ir/view/3146992/modernizr.custom.js"></script> </head> <body> <div class="container"> <header class="clearfix"> <span>raician.ir <span class="bp-icon bp-icon-about" data-content="همه متنها و عنوان ها قابل ویرایش هستند و میتوانید کلیه تغییرات را بدلخواه انجام دهید،کوچک شما محمدغفوررئیسیان"></span></span> <h1>کاری از محمدغفوررئیسیان</h1> <nav> <a href="http://raician.ir/1" data-info="متن۱"><span>متن۱</span></a> <a href="http://raician.ir/2" class="bp-icon bp-icon-next" data-info="متن۲"><span>متن۲</span></a> <a href="http://raician.ir/3" class="bp-icon bp-icon-drop" data-info="متن۳"><span>متن۳</span></a> <a href="http://raician.ir/4" class="bp-icon bp-icon-archive" data-info="متن۴"><span>متن۴</span></a> </nav> </header> <div class="main"> <nav class="cbp-hsmenu-wrapper" id="cbp-hsmenu-wrapper"> <div class="cbp-hsinner"> <ul class="cbp-hsmenu"> <li> <a href="#">عنوان اصلی۱</a> <ul class="cbp-hssubmenu"> <li><a href="#"><img src="http://rozup.ir/view/3146976/menu.png" alt="img01"/><span>عنوان۱</span></a></li> <li><a href="#"><img src="http://rozup.ir/view/3146976/menu.png" alt="img02"/><span>عنوان۲</span></a></li> <li><a href="#"><img src="http://rozup.ir/view/3146976/menu.png" alt="img03"/><span>عنوان۳</span></a></li> <li><a href="#"><img src="http://rozup.ir/view/3146976/menu.png" alt="img04"/><span>عنوان۴</span></a></li> <li><a href="#"><img src="http://rozup.ir/view/3146976/menu.png" alt="img05"/><span>عنوان۵</span></a></li> <li><a href="#"><img src="http://rozup.ir/view/3146976/menu.png" alt="img06"/><span>عنوان۶</span></a></li> </ul> </li> <li> <a href="#">عنوان اصلی۲</a> <ul class="cbp-hssubmenu cbp-hssub-rows"> <li><a href="#"><img src="http://rozup.ir/view/3146976/menu.png" alt="img07"/><span>عنوان۷</span></a></li> <li><a href="#"><img src="http://rozup.ir/view/3146976/menu.png" alt="img08"/><span>عنوان۸</span></a></li> <li><a href="#"><img src="http://rozup.ir/view/3146976/menu.png" alt="img09"/><span>عنوان۹</span></a></li> <li><a href="#"><img src="http://rozup.ir/view/3146976/menu.png" alt="img10"/><span>عنوان۱۰</span></a></li> <li><a href="#"><img src="http://rozup.ir/view/3146976/menu.png" alt="img01"/><span>عنوان۱۱</span></a></li> <li><a href="#"><img src="http://rozup.ir/view/3146976/menu.png" alt="img02"/><span>عنوان۱۲</span></a></li> <li><a href="#"><img src="http://rozup.ir/view/3146976/menu.png" alt="img03"/><span>عنوان۱۳</span></a></li> <li><a href="#"><img src="http://rozup.ir/view/3146976/menu.png" alt="img04"/><span>عنوان۱۴</span></a></li> <li><a href="#"><img src="http://rozup.ir/view/3146976/menu.png" alt="img05"/><span>عنوان۱۵</span></a></li> <li><a href="#"><img src="http://rozup.ir/view/3146976/menu.png" alt="img06"/><span>عنوان۱۶</span></a></li> <li><a href="#"><img src="http://rozup.ir/view/3146976/menu.png" alt="img01"/><span>عنوان۱۷</span></a></li> <li><a href="#"><img src="http://rozup.ir/view/3146976/menu.png" alt="img02"/><span>عنوان۱۸</span></a></li> </ul> </li> <li> <a href="#">عنوان اصلی۳</a> <ul class="cbp-hssubmenu"> <li><a href="#"><img src="http://rozup.ir/view/3146976/menu.png" alt="img10"/><span>عنوان۱۹</span></a></li> <li><a href="#"><img src="http://rozup.ir/view/3146976/menu.png" alt="img06"/><span>عنوان۲۰ Rum</span></a></li> <li><a href="#"><img src="http://rozup.ir/view/3146976/menu.png" alt="img09"/><span>عنوان۲۱</span></a></li> </ul> </li> <li><a href="#">صفحه اصلی</a></li> <li><a href="#">تماس</a></li> </ul> </div> </nav> </div> </div> <script src="http://rozup.ir/view/3146991/cbpHorizontalSlideOutMenu.min.js"></script> <script> var menu = new cbpHorizontalSlideOutMenu( document.getElementById( 'cbp-hsmenu-wrapper' ) ); </script> </body></html>

?

برچسب ها

کد منو کشویی عکسدار, کد menu کشویی عکسدار, کدهای جاوااسکریپت, کدهای کاربردی وب, منوکشویی برای وبلاگ, ابزاروبلاگ,

پـســران بــمـپـور

کد منو کشویی عکسدار

مطالب پیشنهادی

دیدگاه ارسال شده است