Simple CSS Menu déroulant – InMotion Hosting

CSS Simple Drop Down Menu - InMotion Hosting Code Menu DropSimple CSS Menu déroulant

Dans ce tutoriel:

code CSS pour Drop Code Menu HTML pour le menu déroulant

Il y a beaucoup de libre CSS menus en ligne que vous pouvez utiliser pour construire dans votre site Web. Certains d’entre eux exigent JavaScript et certains ne le font pas. Cet article va vous montrer comment ajouter un menu à votre site Web avec CSS seulement. Cela vous permet de créer un menu déroulant sans expérience JavaScript.

code CSS pour Drop Menu

Le code ci devra être introduit dans le lt; headgt; section de votre site Web. Vous pouvez également insérer le code dans une feuille de style CSS externe.

code HTML pour le menu déroulant

Le code ci-dessous est le code HTML pour le menu lui-même. Le menu est dans la liste des balises HTML et sont flotta pour donner l’apparence en ligne. Vous pouvez coller le code où vous voulez (généralement en haut de votre page) dans la lt; bodygt; section de votre page Web.

C’est tout ce qu’on peut en dire. Vous pouvez maintenant personnaliser le menu et faire votre propre! Dans notre prochain guide apprendre à aligner et flotter les images avec les CSS.

Vous voyez Section 1: Simple CSS Menu déroulant

Je peux obtenir tout cela de travail, sauf l’élément «pop out ‘! Les éléments de menu pertinents changent de couleur en fonction de si oui ou non vous survolez, et l’un article (à l’heure actuelle, jusqu’à ce que je le faire fonctionner) qui devrait avoir un «pop out» obtient une ligne de surbrillance de couleur en dessous, et c’est tout .

Je ne sais pas si elle est liée, mais ce qui devrait aller où le hachage est dans le code ci-dessus

Si vous n’êtes pas remplissez dans le lien ou ancre ID à la place de la table de hachage, le menu ne fonctionnera pas correctement. Si vous utilisez un lien de la page, le HREF ressemblera à ceci:

lt; a href ="http://example.com/abc.html"gt; Exemple de page ABClt; / agt;

Si vous utilisez un ANCRE sauter quelque part dans une page, vous devez définir le droit suivant au-dessus de la section que vous essayez de sauter à:

Ensuite, vous feriez le look HREF comme ceci:

lt; a href ="#anchorname"gt; Anchor namelt; / agt;

J’espère que cela l’expliquer pour vous! S’il vous plaît laissez-nous savoir si vous avez d’autres questions ou commentaires.

Cordialement,
Arnel C.

Je comprends les href =. bit; ce que ce serait pour le curseur sur le lien pour faire le reste du menu ‘pop out’?

Désolé si je demande un (apparemment) question stupide! Le codage donné dirait qu’il devrait faire exactement ce que je veux, si je pouvais travailler sur les parties personnalisables!

Merci de votre aide,

Phil (facilement confus!)

Il peut être un peu difficile à suivre lors de la première utilisation de CSS et HTML, alors ne vous inquiétez pas. Je travaille avec la copie de l’exemple exactement comme il est dans cet article, puis travailler en arrière pour voir comment les choses fonctionnent après avoir vérifié l’exemple fonctionne comme prévu.

Essentiellement, le code CSS que vous placez avant la fermeture lt; headgt; balise dans votre page HTML définit la liste non-ordonnée lt; ulgt; les articles qui sont le lt; li&liste-des articles gt, pour être caché avec cette ligne de code par défaut:

Ensuite, si le navigateur détecte une souris planant au-dessus de la lt; ulgt; il affiche à la place comme un élément de bloc de sorte qu’il est visible:

Les couleurs d’arrière-plan changeant simplement vient de la lt; agt; les balises d’ancrage étant survolaient avec cette ligne de CSS:

Ou si elle est un menu déroulant, sa couleur de fond est modifié par le présent code CSS:

Ainsi, il semble que vous pourriez éventuellement soit manquer une partie du code CSS dans votre page HTML, ou que vous n’êtes pas en utilisant un deuxième ensemble de lt; ligt; éléments list-item à l’intérieur d’une autre lt; ulgt; liste non ordonnée.

L’espoir qui fait sens, s’il vous plaît laissez-nous savoir si vous avez encore des problèmes à obtenir pensé à elle.

03/01/2015 01:30

Ok, donc je suis en cours d’exécution dans un problème. J’ai une barre de navigation en haut de ma page (par exemple en-tête). Ces sont mis sous une lt; div class ="nav"gt ;. Un seul de mes liens de nav a un menu déroulant. Je prends donc votre code et coincé la lt; div id ="drop-nav"gt; au-dessus du lien d’une navigation. Le menu déroulant fonctionne maintenant très bien. Le problème est: dans le css ul et sélecteurs li semblent effectuer le reste de mes liens de navigation. Maintenant, je ne peux pas obtenir mes liens de nav à aligner sur la barre de navigation où je veux qu’ils soient. Si quelqu’un a des solutions plz let me know.

05/01/2015 11:28

Avez-vous essayé de les séparer en différentes classes CSS?

Meilleures salutations,
Scott M

10/01/2015 11:30

s’il vous plaît quelqu’un peut me dire que comment pouvons-nous changer la largeur du menu?

L’utilisation de CSS, vous devriez être en mesure de donner la ul une classe, puis attribuer une largeur à elle pour changer la largeur.

Meilleures salutations,
Scott M

08/10/2015 04:25

Je me demande si je peux imposer à personne une fois de plus. J’ai une question à propos de mon menu de navigation en vue mobile. Cette partie fonctionne: les menus supérieure et inférieure se dilatent entièrement à 480px, et je peux cliquer sur un bouton pour les faire apparaître ou disparaître. Je ne suis pas sûr de savoir comment tout cela fonctionne, mais par la grâce de Dieu la plus grande partie travaille. Ma question est, est-il possible en utilisant le CSS pour rendre les menus être caché ou effondré (juste le bouton montrant) lorsque la page s’ouvre. Je l’ai essayé pendant trois jours pour trouver quelque chose sur l’internet / livres qui fonctionnent avec ce que je dois, mais rien n’a fonctionné. Mon site est pas en ligne donc je dois coller le code ci-dessous. J’espère que cela est suffisant pour continuer. Nous vous remercions d’avance pour votre aide si vous pouvez faire quoi que ce soit de lui!

HTML DE LA PAGE D’ACCUEIL

lt; titlegt; NHMHA Harness Club – Homelt; / titlegt; lt; meta charset ="utf-8"gt; lt; meta name ="viewport" content ="width = dispositif de largeur" / Gt; lt; link href ="/support/base.css" rel ="stylesheet" type ="text / css"gt;

lt; headergt; lt; div id ="Titre"gt; Cheval du Nord & Mule harnais Associationlt; / divgt;

lt; ulgt; lt; ligt; lt; a href ="/support/index.html" class ="actif-link"gt; Homelt; / agt; lt; / ligt; lt; ligt; lt; a href ="/support/about.html"gt; Aboutlt; / agt; lt; / ligt; lt; ligt; lt; a href ="/support/events.html"gt; Eventslt; / agt; lt; ulgt; lt; ligt; lt; a href ="/support/meetings.html"gt; Meetingslt; / agt; lt; / ligt; lt; ligt; lt; a href ="/support/upcomingevents.html"gt; Upcoming Eventslt; / agt; lt; / ligt; lt; / ulgt; lt; / ligt; lt; ligt; lt; a href ="/support/membership.html"gt; Membershiplt; / agt; lt; / ligt; lt; ligt; lt; a href ="/support/contact.html"gt; Contactlt; / agt; lt; / ligt;

le contenu de la page.

lt; div class ="toggle2"gt; lt; ulgt; lt; ligt; lt; a href ="/support/index.html" class ="actif-link"gt; Homelt; / agt; lt; / ligt; lt; ligt; lt; a href ="/support/about.html"gt; Aboutlt; / agt; lt; / ligt; lt; ligt; lt; a href ="/support/events.html"gt; Eventslt; / agt; lt; ulgt; lt; ligt; lt; a href ="/support/meetings.html"gt; Meetingslt; / agt; lt; / ligt; lt; ligt; lt; a href ="/support/upcomingevents.html"gt; Upcoming Eventslt; / agt; lt; / ligt; lt; / ulgt; lt; / ligt; lt; ligt; lt; a href ="/support/membership.html"gt; Membershiplt; / agt; lt; / ligt; lt; ligt; lt; a href ="/support/contact.html"gt; Contactlt; / agt; lt; / ligt; lt; / ulgt;

lt; div id ="footercontact"gt; Fort St. John, av lt; / divgt;

CSS DE LA MAIN NAVIGATION-WORKS FINE SAUF MOBILE-SIZE MENU EST VISIBLE LORSQUE LA PAGE EST OUVERT

taille de police. 90em; list-style: none; text-align: center; margin: 0 auto; padding: 0 0 2% 0; border-bottom: DarkGoldenRod 1px solid; gt;

display: none; position: absolute; border-bottom: none; z-index: 9999; gt;

Source: www.inmotionhosting.com


Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

trois × un =