جزئیات وبلاگ

تصویر

آموزش ساخت منوی واکنش گرا با bootstrap javascript

این منوی واکنش گرا

توسط کتابخانه از قبل نوشته شده offcanvas

و استایل آماده yamm

و فونت های تصویر font-awesome

و برای فروشگاه اینترنتی طراحی شده است.

 

برای استفاده از این منو کد html زیر را کپی کنید

<div class="container-fluid" style="background-color: #2566b1;">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-5 col-xs-12">
<button type="button" class="navbar-toggle offcanvas-toggle" data-toggle="offcanvas" data-target="#js-bootstrap-offcanvas" style="color: #fff"> منو <i class="fa fa-caret-left" aria-hidden="true"></i></button>
<div class="pull-left">
<div class="hidden-lg hidden-md hidden-sm" style="color: #aaa">
<a href="" style="color: #fff; font-size: 12px">سبد خرید</a> /
<a href="" style="color: #fff; font-size: 12px">مقایسه</a> /
<a href="" style="color: #fff; font-size: 12px">ورود</a> /
<a href="" style="color: #fff; font-size: 12px">ثبت نام</a>
</div>
</div>
</div>
</div>
</div>
</div>

در ضمن باید فایل های استایل و جاوااسکریپت زیر نیز اضافه شوند

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.offcanvas.min.css" rel="stylesheet">
<link href="css/yamm.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.offcanvas.js"></script>