jQuery Onglets Ligne chute menu

jQuery Onglets Ligne chute menu

Ce menu s'avère une liste imbriquée UL dans une ligne de menu horizontale onglets baisse. Les onglets de haut niveau sont arrondies sur chaque côté grâce à l'utilisation de deux images sur fond transparent, tandis que l'AMT sous chaque apparaissent comme une seule rangée de liens qui déroulant lorsque la souris survole la LI parent. Le menu gère également de se faufiler dans une petite CSS3
, ce qui rend l'utilisation du « border-radius "propriété de donner à chaque lien dans le AMT sous des angles arrondis lorsque la souris passe sur eux ..

Notez que les deux gifs transparents qui permettent de créer des onglets coin arrondi assumer votre page a un fond blanc. Si ce n'est pas, vous aurez besoin de modifier de fond de l'image pour correspondre à votre page. Le compromis est que vous pouvez couleur de fond sur les onglets 'peut être changé en éditant simplement le CSS uniquement.

jQuery Onglets Ligne chute menu

Important: Assurez-vous que votre page contient un doctype valide pour ce menu pour rendre correctement.

Les fichiers externes: Le menu requiert les fichiers de support suivants, que vous devriez télécharger par défaut, tous dans le même répertoire que votre page elle-même:

• droplinetabs.css (dans ce dossier, confirment les chemins vers les deux images transparentes ci-dessous)
• droplinemenu.js (à l'intérieur de ce fichier, confirmez le chemin à l'image flèche ci-dessous)

Le CSS / JavaScript: Le code ci-dessous doit être ajouté à la section HEAD de votre page:

<link rel="stylesheet" type="text/css" href="droplinetabs.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script src="droplinemenu.js" type="text/javascript"></script>

<script type="text/javascript">

//build menu with DIV ID="myslidemenu" on page:

droplinemenu.buildmenu("droplinetabs1")

</script>

Le Code html

<div id="droplinetabs1" class="droplinetabs">

<ul>

<li><a href="votre lien ici #"><span>Home</span></a></li>

<li><a href="votre lien ici #"><span>CSS Examples</span></a>

  <ul>

  <li><a href="#">Activities 1</a></li>

  <li><a href="#">Activities 2</a></li>

  <li><a href="#">Activities 3</a>

 <ul>

 <li><a href="#">Water Sports 1</a></li>

 <li><a href="#">Water Sports 1</a></li>

 <li><a href="#">Water Sports 1</a></li>

 <li><a href="#">Water Sports 1</a></li>

 </ul>

</li>

  <li><a href="#">Activities 4</a></li>

  </ul>

</li>

<li><a href="http://tools.dynamicdrive.com"><span>Tools</span></a></li>

<li><a href="http://www.javascriptkit.com/"><span>JavaScript</span></a>

  <ul>

  <li><a href="#">Traveling 1</a></li>

  <li><a href="#">Traveling 2</a></li>

  <li><a href="#">Traveling 3</a></li>

  <li><a href="#">Traveling 4</a>

 <ul>

 <li><a href="#">Africa 1</a></li>

 <li><a href="#">Africa 2</a></li>

 <li><a href="#">Africa 3</a></li>

 <li><a href="#">Africa 4</a>

 <ul>

 <li><a href="#">Kenya 1</a></li>

 <li><a href="#">Kenya 2</a></li>

 <li><a href="#">Kenya 3</a></li>

 <li><a href="#">Kenya 4</a></li>

 <li><a href="#">Kenya 5</a></li>

 </ul>

</li>

 </ul>

</li>

  <li><a href="#">Traveling 5</a></li>

  </ul>

</li>

<li><a href="http://www.cssdrive.com"><span>Gallery</span></a></li>

</ul>

</div>

Posted in: blogger html css menu horizontale