1. Accueil
  2. Question et réponse
  3. Y at-il un plugin jquery qui fait mieux? Liste déroulante de texte (Pas un menu)

Y at-il un plugin jquery qui fait mieux? Liste déroulante de texte (Pas un menu)

2009-09-26 4 views
0

Sur la page suivante, j'ai créé une maquette rapide de ce que je cherchais. Voici le problème avec mon exemple:Y at-il un plugin jquery qui fait mieux? Liste déroulante de texte (Pas un menu)

1) Il doit être en ligne afin qu'il puisse faire partie d'une phrase. Comme .. Bienvenue sur mon blog, consultez quelques-uns des [Catégories]. Encore du texte après.

2) Lorsque les exemples de la boîte, il devrait chevaucher le contenu ci-dessous plutôt que de le pousser vers le bas.

http://kyleetilley.name/examples/catbox/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <title>Blog Design</title> 

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

     <script type="text/javascript"> 
     $(document).ready(function(){ 
      $(".catbox ul").hide(); 

      $(".catbox_toggle a").click(function() 
      { 
       $(this).parent().toggleClass("catbox_active"); 
       $(".catbox ul").slideToggle(); 
      }); 
     }); 
     </script> 

     <style> 
     .catbox 
     { 
      width: 250px; 
      border: 1px solid #000; 
      padding: 5px; 
      position: relative; 
      float: left; 
     } 

     .catbox ul 
     { 
      margin: 0; 
      padding: 0; 
      list-style: none; 
     } 
     </style> 
    </head> 

    <body id=""> 
     <h1></h1> 

     <div class="catbox"> 
      <div class="catbox_toggle"><a href="#">Categories</a></div> 
      <ul> 
       <li><a href="#1">Link 1</a></li> 
       <li><a href="#2">Link 2</a></li> 
       <li><a href="#3">Link 3</a></li> 
       <li><a href="#4">Link 4</a></li> 
      </ul> 
     </div> 

    </body> 
<html>

En option, si vous me dire comment acomplish ce que je veux faire avec le code que j'ai, ce serait utile aussi.

Source

2009-09-26 Kylee

Répondre

0

essayer

.catbox 
{ 
padding: 5px; 
position: relative; 
display:inline-block; 
zoom:1; 
*display:inline; 
} 
.catbox ul 
{ 
margin: 0; 
padding: 0; 
list-style: none; 
position:absolute; 
top:20px; 
}

Source

2009-09-26 15:29:28

+0

IE6/7 prend uniquement en charge le blocage en ligne si l'élément est nativement en ligne, ce qui pose problème. Aussi, Zoom? Cela semble être CSS 3 (est-il supporté par IE6?) Mais que fait-il réellement dans cet exemple? – Kylee

+0

zoom: 1; * affichage: en ligne; sont pour ie7 peut-être ie6 incompatibilité de bloc en ligne –

Questions connexes

 Questions connexes