2011-10-22 2 views
-2

Je ne suis pas très doué en codage html ou css, j'ai donc besoin d'aide.Dropdown CSS/HTML

enter image description here

En bref, lorsque vous passez la souris sur le triangle, il affichera le menu déroulant avec la liste des options (panneau de contrôle utilisateur, privé messsages, etc.). Quel est le meilleur moyen d'y parvenir en utilisant html, css, etc? Si vous pouviez fournir le code, je l'apprécierais beaucoup.

Cheers, Spencer

+0

Est-ce VBulletin? – genesis

+0

Jetez un oeil à Stu Nicholls CSSPlay Demos - http://www.cssplay.co.uk/menus/ - Je suis sûr que vous en trouverez un qui répond à vos besoins – topek

+5

Si vous avez essayé de le faire vous-même, puis a demandé spécifiquement pourquoi quelque chose ne fonctionnait pas, vous auriez probablement apprendre à le faire plus efficacement. ':)' –

Répondre

0

Je ne peux pas vous fournir tout le code, mais voici ce que je pense être une bonne aide.

<div> 
    Welcome back dude! 
    <div id="triangle"> 
    <div id="menu"> 
     <!-- Here goes the menu links whatever --> 
    </div> 
    </div> 
</div> 

Veuillez noter que le menu div est contenu dans le triangle div.

Puis dans votre code CSS, écrire quelque chose comme ceci:

#menu { display:none; position:absolute; } 
#triangle { position:relative; } 
#triangle:hover #menu { display:block; } /* This is what makes the menu show up. When you hover triangle (or anything in it, like menu) then the menu is visible */ 

La position des attributs sera pour le #menu de ne pas modifier d'autres éléments dans la page quand il montre.

Ensuite, vous devrez faire des ajustements au menu triangle, si nécessaire.

+0

Merveilleux! Est-ce possible alors quand vous passez la souris sur le triangle, le menu est toujours affiché pour que vous puissiez cliquer sur les liens sans qu'il ne disparaisse? – Spencer

+0

@Spencer, que voulez-vous dire? Avez-vous obtenu le menu CSS pour fonctionner correctement? –