La date/heure actuelle est Dim 22 Oct 2017 - 01:09 - créer un forum

[Tutoriel] Menu style dropdown tout en css + menu responsive

Aller au contenu

Poster un nouveau sujet Répondre au sujet Aller à la page: <  1, 2, 3, 4, 5, 6, 7, 8

[Tutoriel] Menu style dropdown tout en css + menu responsive
Auteur Message
kieffer


Inscrit le: 12 Nov 2009
Messages: 412

MessagePosté le: Mer 26 Nov 2014 - 23:42    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

PublicitéSupprimer les publicités ?
Revue du message précédent :

RotorMan a écrit:
Re,

Il se centre avec la class "container". Au pire jouer avec text-align center et float center....

Pour les bordures, dans la class "cssmenu", il suffit d'ajouter "border-left: solid 2px black;" "border-bottom: solid 2px black;", etc... Personnellement j'ai préféré mettre "box-shadow:0 3px 3px 0 rgba(0,0,0,0.4)" à des lignes d'encadrement.

Bonne fin de soirée


je teste pour les bordures et je te dit pour le centrage je regarde aussi
Forum
Auteur Message
kieffer
Membre


Hors ligne
Membre

Inscrit le: 12 Nov 2009
Messages: 412
Niveau:
Point(s): 397
Moyenne: 0,96
Mac Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Gémeaux (21mai-20juin)

MessagePosté le: Mer 26 Nov 2014 - 23:55    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

je comprend pas chez toi tu as un efet chadow sympa pas moi ma class menu

le centrage je trouve pas box shadow beaucoup plus sympa
_______________________
Membre fondateur de Graphcode
Forum d'entraide gratuit graphisme et code multi-plateformes
Ressources photoshop et gimp gratuites



Forum
Auteur Message
Orphet
Membre


Hors ligne
Membre

Inscrit le: 24 Aoû 2017
Messages: 2
Niveau:
Point(s): 2
Moyenne: 1,00
Windows 8 ou 10 Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Bélier (21mar-19avr) 鷄 Coq

MessagePosté le: Jeu 24 Aoû 2017 - 13:22    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

Bonjour ! Petite question ...

Ca rend superbement bien sur mon forum : http://poudlard-magical.xooit.fr/index.php

Mais impossible de ne pas avoir la possibilité de ne pas cliquer sur un menu ?

Par exemple, je ne veux pas qu'en cliquant sur "Accueil" cela rafraîchisse la page et si dans le code je tente d'enlever le lien, cela détruit la police d'écriture :/

Voici mon code :

Code: Sélectionner - Agrandir
/*-----------------------DÉBUT DU MENU --------------------*/

<div id="menu">
   
      <div id="conta">
   
<table cellspacing="0" align="left">
  <tr>
  <td class="li.row" align="left">

<ul id="nav">

 <li class="top"><a href="" class="top_link"><span class="down"><span class="down">Accueil</span></a>
  <ul class="sub">
   
   <li><a href="http://poudlard-magical.xooit.fr/portal.php">Hall d'entrée <b>(Portail)</b></a></li>
   <li><a href="http://poudlard-magical.xooit.fr/index.php">Grand Escalier <b>(Forum)</b></a></li>
  </ul>
 </li>

 <li class="top"><a href="" class="top_link"><span class="down">Poudlard</span></a>

  <ul class="sub">
   <li><a href="http://poudlard-magical.xooit.fr/portal.php?pid=92">Salles Communes</a></li>
   <li><a href="http://poudlard-magical.xooit.fr/portal.php?pid=7">Salles de cours</a></li>
   <li><a href="http://poudlard-magical.xooit.fr/portal.php?pid=8">Sabliers Géants</a></li>
   <li><a href="http://poudlard-magical.xooit.fr/portal.php?pid=67">Salle des trophées</a></li>
   <li><a href="http://poudlard-magical.xooit.fr/portal.php?pid=6">Bibliothèque</a></li>
   <li><a href="http://poudlard-magical.xooit.fr/portal.php?pid=99">La Grande Salle</a></li>   
   <li><a href="http://poudlard-magical.xooit.fr/portal.php?pid=24">Parc de Poudlard</a></li>
   <li><a href="http://poudlard-magical.xooit.fr/portal.php?pid=98">Infirmerie</a></li>
   <li><a href="http://poudlard-magical.xooit.fr/portal.php?pid=101">Salle sur demande</a></li>
  </ul>
 </li>

 <li class="top"><a href="" class="top_link"><span class="down">Hors Poudlard</span></a>

  <ul class="sub">
   <li><a href="http://poudlard-magical.xooit.fr/portal.php?pid=77">Les trois Balais <b>(Chat)</b></a></li>
   <li><a href="http://poudlard-magical.xooit.fr/portal.php?pid=9">Azkaban</a></li>
   <li><a href="http://poudlard-magical.xooit.fr/portal.php?pid=25">Chemin de traverse</a></li>
   <li><a href="http://poudlard-magical.xooit.fr/portal.php?pid=26">Pré au Lard</a></li>
   <li><a href="http://poudlard-magical.xooit.fr/portal.php?pid=27">Voie 9 3/4</a></li>
   <li><a href="http://poudlard-magical.xooit.fr/portal.php?pid=28">Forêt interdite</a></li>
   <li><a href="http://poudlard-magical.xooit.fr/portal.php?pid=29">Terrain de Quidditch</a></li>
  </ul>
 </li>

 <li class="top"><a href="" class="top_link"><span class="down">Conciergerie</span></a>

  <ul class="sub">
   <li><a href="http://poudlard-magical.xooit.fr/portal.php?pid=69">Règlement du forum</a></li>
   <li><a href="http://poudlard-magical.xooit.fr/portal.php?pid=94">Règlement des RPG</a></li>
<!-- BEGIN switch_user_logged_in -->
   <li><a href="http://poudlard-magical.xooit.fr/portal.php?pid=93">Grimoire</a></li>
<!-- END switch_user_logged_in -->
   <li><a href="http://poudlard-magical.xooit.fr/portal.php?pid=10">Equipe du Site</a></li>
   <li><a href="http://poudlard-magical.xooit.fr/portal.php?pid=90">Partenaires</a></li>
   <li><a href="http://poudlard-magical.xooit.fr/portal.php?pid=100">Foire aux Questions</a></li>
   <li><a href="http://poudlard-magical.xooit.fr/portal.php?pid=88">Mentions légales & contact</a></li>
  </ul>
 </li>
<!-- BEGIN switch_user_logged_out -->
<li class="top"><a href="http://poudlard-magical.xooit.fr/login.php" class="top_link"><span class="down">Connexion</span></a>

<li class="top"><a href="http://poudlard-magical.xooit.fr/profile.php?mode=register" class="top_link"><span class="down"><blink>Inscription</blink></span></a>
<!-- END switch_user_logged_out -->
<!-- BEGIN switch_user_logged_in -->
 <li class="top"><a href="" class="top_link"><span class="down">Profil</span></a>

  <ul class="sub">
   <li><a href="http://poudlard-magical.xooit.fr/profile.php?mode=editprofile">Modifier mon profil</a></li>
   <li><a href="http://poudlard-magical.xooit.fr/privmsg.php">Ma volière</a></li>
  </ul>
 </li>

 <li class="top"><a href="http://poudlard-magical.xooit.fr/login.php?logout=true" class="top_link"><span class="down">Déconnexion</span></a>

<!-- END switch_user_logged_in -->
 
</td>

  </tr>
 

</table>   
</div></div>


/*-------------------Fin du menu---------------------------*/


Forum
Auteur Message
RotorMan
Modérateur


Hors ligne
Modérateur

Inscrit le: 21 Déc 2006
Messages: 860
Niveau:
Point(s): 858
Moyenne: 1,00
Windows 8 ou 10 Firefox (ou l'un de ses dérivés : Minefield/Pale Moon/...) Masculin Bélier (21mar-19avr) 龍 Dragon

MessagePosté le: Jeu 24 Aoû 2017 - 13:54    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

Bonjour Orphet,

Possible en effet.
Par exemple pour votre bouton "Accueil" vous avez ceci :

Code: Sélectionner - Agrandir
 <li class="top"><a href="" class="top_link"><span class="down"><span class="down">Accueil</span></a>


Il suffit de mettre ceci :

Code: Sélectionner - Agrandir
 <li class="top"><a><span class="down"><span class="down">Accueil</span></a>


Auquel cas si la police d'écriture change, mettre ainsi :

Code: Sélectionner - Agrandir
<li class="top"><a class="top_link"><span class="down"><span class="down">Accueil</span></a>


Ou encore plus simple : simplement mettre un # dans le lien comme ceci :

Code: Sélectionner - Agrandir
<a href="#" class="top_link"><span class="down"><span class="down">Accueil</span></a>


Ainsi le bouton "Accueil" ne sera plus un lien actif renvoyant sur l'index.
Vous pouvez faire ceci pour tous vos "boutons" qui ouvrent un menu déroulant.

Solution très simple mais efficace. Wink
Cordialement
_______________________
Aucune aide par MP. Le forum d'entraide est fait pour cela.
La lecture du règlement est obligatoire
50 balais mais 30 dans ma tête.
Discord - Twitter


Forum
Auteur Message
Orphet
Membre


Hors ligne
Membre

Inscrit le: 24 Aoû 2017
Messages: 2
Niveau:
Point(s): 2
Moyenne: 1,00
Windows 8 ou 10 Chrome (ou l'un de ses dérivés : Chromium/Iron/...) Masculin Bélier (21mar-19avr) 鷄 Coq

MessagePosté le: Jeu 24 Aoû 2017 - 14:16    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive Répondre en citant

Bonjour et merci pour la réponse Smile

Cela marche impeccablement !


Forum
Auteur Message
Contenu Sponsorisé





MessagePosté le: Aujourd’hui à 01:09    Sujet du message: [Tutoriel] Menu style dropdown tout en css + menu responsive

Montrer les messages depuis:   
Répondre au sujet Page 8 sur 8 Aller à la page: <  1, 2, 3, 4, 5, 6, 7, 8




Index | Panneau d’administration | Créer un forum | Forum gratuit d’entraide | Annuaire des forums gratuits | Signaler une violation | Conditions générales d'utilisation
Propulsé par p h p B B © 2016 p h p B B Group | Traduction par : phpBB-fr.com
 
© 2003-2013 Xooit.com - Contact - Mentions légales - CGU - Charte - CNIL : 1381401