18008 sujets

Questions générales et questions de débutants

Beosin d'aide pour un sous-menu html css

Bonjour,

J'ai besoin de votre aide. Smiley decu

Voici le bout de code de mon menu de navigation + sont style.

Mon Index.html

</head>
 <body>
  <div class="global_container_">
   <header class="header">
    <div class="image-top-home">
     <div class="header-2">        
      <div class="menu-principale">
       <div class="l-constrained-2 group">
        <a href="http://cpu-gaming.com/"><img class="logo-cpu-gaming-home-page" src="images/logo_cpu_gaming_-_home_pa.png" alt="" width="158" height="36"></a>
        <p class="text">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="index.html">LA STRUCTURE</a> &nbsp;&nbsp; <a href="news.html">NEWS</a> &nbsp;&nbsp;<a href="roster%20cod.html">ROSTER</a> &nbsp;&nbsp; <a href="event.html">CPU EVENT</a> &nbsp;&nbsp; <a href="tournament.html">CPU TOURNAMENT</a> &nbsp;&nbsp;<a href="gallery.html">GALLERY</a> &nbsp;&nbsp; <a href="forum.html">FORUM</a> &nbsp;&nbsp; <a href="#">SHOP</a></p>              
        <div class="separateur-menu-social-network"></div>
        <a href="https://twitter.com/cpu_staff"><img class="bouton-acces-twitter" src="images/bouton_acces_twitter_2.png" alt="" width="24" height="21"></a>
        <a href="https://www.facebook.com/cpugaming/"><img class="bouton-acces-facebook" src="images/bouton_acces_facebook_2.png" alt="" width="11" height="24"></a>           
       </div>
      </div>
     </div>


Le styles.css : 

body {
	min-width: 1458px;
	color: #242424;
	font-family: FuturaStd-Book, serif;
	font-style: normal;
	font-weight: normal;
	letter-spacing: 0;
	text-decoration: none;
}
.global_container_ {
	float: none;
	height: auto;
	margin: 0 auto;
	position: relative;
	width: 100%; /* 1500px / 1500px = 100% */
	background: #ffffff center 0;
	background-position: center top;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.header {
	position: relative;
}
.image-top-home {
	min-height: 700px;
	position: relative;
	width: 100%; /* 1500px / 1500px = 100% */
	background: url(images/image_top_home_page.jpg) no-repeat center 0;
	background-position: center top;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.header-2 {
	position: relative;
}

.menu-principale {
	padding: 11px 0 7px;
	position: relative;
	background: rgba(40, 37, 38, 0.65) center 0;
	background-position: center top;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}


Je voudrais créer un sous-menu pour ajouter des sous-pages dans les onglets suivant :

<a href="#">LA STRUCTURE</a>
->Sous-Menu1
->Sous-Menu2
->Sous-Menu3

<a href="#">ROSTER</a>
->Sous-Menu1
->Sous-Menu2
->Sous-Menu3

Si un webmaster plus qualifié que moi pourrait m'aider, je serais très ravi de prendre son aide.

J'aimerais directement avoir, mais sous-menu dans mon script suivent :


<p class="text">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="index.html">LA STRUCTURE</a> &nbsp;&nbsp; <a href="news.html">NEWS</a> &nbsp;&nbsp;<a href="roster%20cod.html">ROSTER</a> &nbsp;&nbsp; <a href="event.html">CPU EVENT</a> &nbsp;&nbsp; <a href="tournament.html">CPU TOURNAMENT</a> &nbsp;&nbsp;<a href="gallery.html">GALLERY</a> &nbsp;&nbsp; <a href="forum.html">FORUM</a> &nbsp;&nbsp; <a href="#">SHOP</a></p>


Si vous avez besoin de d'autre information, n’hésitez pas.

Par avance, je vous remercie d'avoir prix le temps de me lire.

Cordialement,
Netri.
Modifié par Netri (11 Feb 2016 - 14:57)
Tintin75 a écrit :
Bonjour,

Ton problème ce trouve à qu'elle niveau ?


Bonjour,

Voici à quoi ressemble mon menu de navigation :

http://zupimages.net/up/16/06/8ync.png

Lien direct d'image :

http://zupimages.net/up/16/06/8ync.png

Et bien quand je souhaite créer, mais sous-page dans les onglets suivent :

<a href="#">LA STRUCTURE</a> et <a href="#">ROSTER</a>

Mais sous-page, ne s'affiche pas.

Du coup, j'aurais besoin d'aide pour créer, mais sous-menu dans mon menu de navigation suivent :

<p class="text">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="index.html">LA STRUCTURE</a> &nbsp;&nbsp; <a href="news.html">NEWS</a> &nbsp;&nbsp;<a href="roster%20cod.html">ROSTER</a> &nbsp;&nbsp; <a href="event.html">CPU EVENT</a> &nbsp;&nbsp; <a href="tournament.html">CPU TOURNAMENT</a> &nbsp;&nbsp;<a href="gallery.html">GALLERY</a> &nbsp;&nbsp; <a href="forum.html">FORUM</a> &nbsp;&nbsp; <a href="#">SHOP</a></p>


Si besoin voici sont style :

.menu-principale {
	padding: 11px 0 7px;
	position: relative;
	background: rgba(40, 37, 38, 0.65) center 0;
	background-position: center top;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;


Je voudrais avoir ceci pour mon menu de navigation.

http://zupimages.net/up/16/06/ea8x.png

<a href="#">LA STRUCTURE</a>
->Sous-page1
->Sous-page2
->Sous-page3

<a href="#">ROSTER</a>
->Sous-page1
->Sous-page2
->Sous-page3

Par avance, je vous remercie d'avoir prix le temps de me lire.

Cordialement,
Netri.
Modifié par Netri (11 Feb 2016 - 18:47)
A première vue il te manque du code pour générer l'affichage des sous menus.

Tu as pris ton code sur un tuto en ligne ? C'est propre, c'est beau.

Sur mon site je gère ça avec des 
<div class="sousmenu">
			<a href="Xl">P</a>
		</div>
		<div class="sousmenu">
			<a href="Y">Y</a>
		</div>

Je préfère les menus verticaux, qui te permette d'allonger la sauce si besoin est. En horizontal, si tu veux rajouter une bricole tu es coincé à cause de la largeur. C'est un avis personnel, ça dépend aussi des besoins.

Va voir ici -> http://www.smashingapps.com/2012/03/14/40-excellent-css3-menu-tutorials.html

Ca te donnera des idées Smiley smile Si tu veux bidouiller du code c'est royal Smiley murf

Courage Smiley cligne
Modifié par Tintin75 (11 Feb 2016 - 19:57)
Bonjour,

Merci pour ta réponse, je vais donc tester ça et je reviendrais donner les informations. Smiley cligne

Cordialement,
Netri.
Bonjour Tintin75,

Après avoir effectué plusieurs tests, je n'arrive toujours pas à obtenir ce que je souhaite.

À l'aide de, mais script, pourrais-tu regarder et réaliser mon sous-menu demandé pour, mais onglet ?

Si tu sais m'aider, je ne serais comment te remercier à part te dire MERCI. Smiley biggrin

Cordialement,
Netri.
salut,

Tu as mis ton fichier en javascript sur le serveur pour que ça fonctionne ?

Car sur mon menu, j'utilise un fichier en javascript pour ouvrir ou fermer mes "tiroirs".

Sans le fichier sur le serveur, le menu ne fonctionne pas, ce qui est logique. Pour mon menu, c'est mon cas.
Modifié par Tintin75 (24 Feb 2016 - 15:10)
tiens : http://codepen.io/anon/pen/ZWzKLL en pure CSS

Par contre fait gaffe à ta manière de parler (ou d'écrire en l'occurence) j'ai du relire trois fois chaque phrases pour comprendre (entre les mais qui sont en faite des met et des mais qui sont vraiment des mais ou pas...) ...
Jencal, il y a pas de fichier JS pour le faire fonctionner ?

Sur mon menu, j'ai un fichier JS pour que ça tourne
>jencal

Nickel chrome ton petit menu avec sous menu, je m'apprêtais à faire exactement le même genre de truc.
Ça va m'éviter des tâtonnements !

Merci...
Modifié par Gropilou (25 Feb 2016 - 17:31)
Bonjour à toi JENCAL,

Merci pour le script CSS, je vais donc faire les tests.

Cordialement,
Netri.
Sujet clos
Aller à