recherche

Maison >interface Web >js tutoriel >Exemple de menu déroulant multi-niveaux Bootstrap 3

Exemple de menu déroulant multi-niveaux Bootstrap 3

PHPz
PHPzoriginal
2017-12-07 16:03:072103parcourir

Bien que Bootstrap soit bon, pour les interfaces complexes, il reste encore de nombreux composants qui doivent être développés par vous-même, et il faut un certain effort pour s'appuyer sur l'interface Bootstrap simple et élégante. Partageons un menu déroulant à plusieurs niveaux Bootstrap 3. Aucun script Js tiers n'est nécessaire. Il peut être utilisé directement après la copie.

[Recommandations vidéo associées : Tutoriel Bootstrap]

<!DOCTYPE HTML> 
<html lang="zh-CN"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Bootstrap 3 的多级下拉菜单示例</title> 
  <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
  <link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"/> 
  <script type="text/javascript" src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 
  <style type="text/css"> 
    .dropdown-submenu { 
      position: relative; 
    } 
    .dropdown-submenu > .dropdown-menu { 
      top: 0; 
      left: 100%; 
      margin-top: -6px; 
      margin-left: -1px; 
      -webkit-border-radius: 0 6px 6px 6px; 
      -moz-border-radius: 0 6px 6px; 
      border-radius: 0 6px 6px 6px; 
    } 
    .dropdown-submenu:hover > .dropdown-menu { 
      display: block; 
    } 
    .dropdown-submenu > a:after { 
      display: block; 
      content: " "; 
      float: right; 
      width: 0; 
      height: 0; 
      border-color: transparent; 
      border-style: solid; 
      border-width: 5px 0 5px 5px; 
      border-left-color: #ccc; 
      margin-top: 5px; 
      margin-right: -10px; 
    } 
    .dropdown-submenu:hover > a:after { 
      border-left-color: #fff; 
    } 
    .dropdown-submenu.pull-left { 
      float: none; 
    } 
    .dropdown-submenu.pull-left > .dropdown-menu { 
      left: -100%; 
      margin-left: 10px; 
      -webkit-border-radius: 6px 0 6px 6px; 
      -moz-border-radius: 6px 0 6px 6px; 
      border-radius: 6px 0 6px 6px; 
    } 
  </style> 
</head> 
<body> 
<p class="container"> 
  <p class="row"> 
    <h2>Bootstrap 3多级下拉菜单</h2> 
    <hr> 
    <p class="dropdown"> 
      <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" 
        href="javascript:;"> 
        下拉多级菜单 <span class="caret"></span> 
      </a> 
      <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu"> 
        <li><a href="javascript:;">一级菜单</a></li> 
        <li><a href="javascript:;">一级菜单</a></li> 
        <li class="pider"></li> 
        <li class="dropdown-submenu"> 
          <a tabindex="-1" href="javascript:;">一级菜单</a> 
          <ul class="dropdown-menu"> 
            <li><a tabindex="-1" href="javascript:;">二级菜单</a></li> 
            <li class="pider"></li> 
            <li class="dropdown-submenu"> 
              <a href="javascript:;">二级菜单</a> 
              <ul class="dropdown-menu"> 
                <li><a href="javascript:;">三级菜单</a></li> 
              </ul> 
            </li> 
          </ul> 
        </li> 
      </ul> 
    </p> 
  </p> 
</p> 
</body> 
</html>

Recommandations associées :

Utiliser CSS3 pour mettre en œuvre les étapes pour implémenter l'effet de menu déroulant animé

JS pour afficher et masquer le menu déroulant

Implémentation JQuery du drop -exemple de code de fonction de menu déroulant

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Les dernières questions et solutions d'entretien avec les programmeurs JavascriptArticle suivant：Les dernières questions et solutions d'entretien avec les programmeurs Javascript

Articles Liés

Voir plus