تخفیف ویژه هفته کتاب و کتاب خوانی، فرصت یادگیری با 40٪ تخفیف (کد تخفیف: Ketab)
زمان باقی مانده تخفیف ویژه (تمدید شد)
سبد (0)

تبلیغات

ایجاد نوار هدایتی با منوهای کرکره ای

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

اگر شما یک طراح قالب نیستید ، و یا اینکه هنوز اطلاعات زیادی در این زمینه ندارید ، می توانید از مدل html برای جوملا 3

که توسط فریم ورک bootstrap ایجاد شده است استفاده کنید .(ورژن 2.3.2 از bootstrap برابر با جوملا 3 است ).

شما می توانید این مدل را از اینجا دانلود کنید 

فایل بالا را دانلود کنید  و آن را در یک فولدر جدید unzip کنید . 

می خواهیم به صورت سردستی یک منوی کرکره ای ایجاد کنیم  . 

 در پوشه ی htmlmodel-joomla3 یک فایل اچ تی ام ال درست کنید  و نام آن را example1 قرار دهید . 

ابتدا یک تگ html  بسازید . 

حال وقت آن است که بوتسترپ و کلاس های آن را وارد کنیم  پس کد های زیر را که قسمت head  هستند را وارد می کنیم : 

Title

<head>
<meta charset="utf-8">    
<title>مثال شماره 1</title>    
<meta name="viewport" content="width=device-width, initial-scale=1.0">    
<meta name="description" content="">    
<meta name="author" content="">    
<script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>    
<script src="/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>    
<script src="/media/jui/js/bootstrap.min.js" type="text/javascript"></script>    
<link href="/media/jui/css/bootstrap.css" rel="stylesheet">    
<link href="/media/jui/css/bootstrap-responsive.css" rel="stylesheet">    
<link href="/css/template.css" rel="stylesheet">    
</head>

 بعد درون تگ body  یک دایو می سازیم با کلاس container  : 

Title

<body>
<div class="container">


</div> <!--container-->
</body>

بعد درون این div  یک تگ ul  می سازیم با کلاس های nav و nav-tabs  که منوی ما را تشکیل می دهد: 

Title

<body>   
<div class="container">
<ul class="nav nav-tabs">
</ul>

</div> <!--container-->
</body>

حالا می خواهیم خود منو ها را تعریف کنیم پس از تگ های li کمک می گیریم . در تگ اول از کلاس active  استفاده می کنیم 

که نشان دهنده ی منوی home  است  و در درون یک تگ a (لینک) این منو را می سازیم . 

Title

<body>  
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a href="#">home</a></li>
</ul>

</div> <!--container-->
</body>

 تا اینجا منوی ما به شکل زیر در خواهد آمد : 

Title

 

 دو تگ li دیگر هم به همراه دو تگ a برای دو منوی دیگر اضافه می کنیم . و سپس یک تگ li دیگر ایجاد کرده و به آن

کلاس drop-down را می دهیم . کلاس dropdown در این تب از منو یک نوع لیست کشویی یا به عبارت بهتر یک منوی کرکره ای ایجاد

می کند .البته برای ایجاد عناصر داخل این منوی کرکره ای از یک تگ ul استفاده کرد که کلاس dropdown-menu را در خود دارد .

Title

<body>  
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a href="#">home</a></li>
<li><a href="#">about</a></li>
        <li><a href="#">contact</a></li>
<li class="dropdown">
<ul class="dropdown-menu">
<li><a href="#">item1</a></li>
<li><a href="#">item2</a></li>
</ul>
</li>
  
</ul>

</div> <!--container-->
</body>

تا اینجا هنوز کاری انجام نمی شود  و منوی کرکره ای درست نشده است . ما باید یک تگ a (لینک) را در درون تگ li با کلاس dropdown

ایجاد کنیم . و به آن کلاس dropdown-toggle را بدهیم . و همچنین باید عبارت data-toggle="dropdown" را به تگ a اضاف کنیم . 

بعد برای اینکه یک مثلث کوچک کنار منوی کرکره ای dropdpwn  ایجاد کنیم  یک تگ b ایجاد می کنیم و درون آن از کلاس caret

استفاده می کنیم . 

Title

<body>  
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a href="#">home</a></li>
<li><a href="#">about</a></li>
        <li><a href="#">contact</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Dropdown<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">item1</a></li>
<li><a href="#">item2</a></li>
</ul>
</li>
  
</ul>

</div> <!--container-->
</body>

خب دوستان تا اینجا منوی ما به شکل زیر در می آید و این مقاله همین جا به اتمام می رسد : 

Title

منوی کرکره ای
 
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی