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

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

اگر شما یک طراح قالب نیستید ، و یا اینکه هنوز اطلاعات زیادی در این زمینه ندارید ، می توانید از مدل 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

: نوشته شده توسط احسان عباسی; بازدید: 15638

برای درج دیدگاه، ابتدا باید وارد بیاموز شوید.