Sujet Précédent Sujet Suivant

Fusion Menus Dynamiques

Fermé
Roce - 8 nov. 2012 à 19:26
 Roce - 10 nov. 2012 à 13:43
Bonjour,

Je ne connais pas grand chose au codage et je me suis lancé dans quelque chose bien trop compliqué pour moi. Si quelqu'un peut me donner un coup demain, ca serai volontier.

Le Problème:

Je souhaite incorporer un menu dynamique en Html Css dans mon site web.
J'ai pour cela pris 2 scripts (1 pour le design, l'autre pour les fonctions)
Je souhaite fusionner ces deux derniers, pour obtenir les fonctions de l'un avec le design de l'autre.

Comme je m'y retrouve pas trop dans les sources,
je vous donne le travail la ou j'en suis:

CSS:

body
{
background: url("http://www.red-team-design.com/wp-content/uploads/2012/02/grid.png") repeat scroll 0 0 #FFFFFF;
width: 960px;
margin: 40px auto;
}

/* Main menu */

#menu
{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #111;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}

#menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
}

#menu a
{
float: left;
display:block;
height: 25px;
padding: 0 25px;
color: #fafafa;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}

#menu li:hover > a
{
color: #FF9900;
}

*html #menu li a:hover /* IE6 */
{
color: #FF9900;
}

#menu li:hover > ul
{
display: block;
}

/* Sub-menu */

#menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #15405F;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 5px;
}

#menu ul ul
{
top: 0;
left: 150px;
}

#menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

#menu ul a
{
padding: 10px;
height: 10px;
width: 130px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}

*html #menu ul a /* IE6 */
{
height: 10px;
}

*:first-child+html #menu ul a /* IE7 */
{
height: 10px;
}

#menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}

#menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}

#menu ul li:first-child > a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}

#menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}

#menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}

#menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
}


#menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}

#menu li:hover .drop {
background:url("img/drop.png") no-repeat right 7px;
}

.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
margin:4px auto;
float:left;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:left;
padding:10px 5px 10px 5px;
border:0px solid #FF9966;
border-top:none;



/* Rounded Corners */
-moz-border-radius: 0px 5px 5px 5px;
-webkit-border-radius: 0px 5px 5px 5px;
border-radius: 0px 5px 5px 5px;
}

.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}

#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_2columns,
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
left:-1px;
top:auto;
}

.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
}
.col_1 {width:130px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}

#menu p {
line-height:18px;
margin:0 0 10px 0;
}

#menu li .black_box {
background-color:#333333;
color: #eeeeee;
text-shadow: 1px 1px 1px #000;
padding:4px 6px 4px 6px;

/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

/* Shadow */
-webkit-box-shadow:inset 0 0 3px #000000;
-moz-box-shadow:inset 0 0 3px #000000;
box-shadow:inset 0 0 3px #000000;
}

#menu li ul {
list-style:none;
padding:0;
margin:0 0 12px 0;
}
#menu li ul li {
font-size:12px;
line-height:24px;
position:relative;
text-shadow: 1px 1px 1px #ffffff;
padding:0;
margin:0;
float:none;
text-align:left;
width:130px;
}
#menu li ul li:hover {
background:none;
border:none;
padding:0;
margin:0;
}

#menu li .greybox li {
background:#F4F4F4;
border:1px solid #bbbbbb;
margin:0px 0px 4px 0px;
padding:4px 6px 4px 6px;
width:116px;

/* Rounded Corners */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
#menu li .greybox li:hover {
background:#ffffff;
border:1px solid #aaaaaa;
padding:4px 6px 4px 6px;
margin:0px 0px 4px 0px;
}

/* Clear floated elements */
#menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */

HTML :

<ul id="menu">
<li><a href="http://www.red-team-design.com/">Home</a></li>
<li>
<a href="#">Categories</a>
<ul>
<li>
<a href="#">CSS</a>
<ul>
<li><a href="#">Item 11</a></li>
<li><a href="#">Item 12</a></li>
<li><a href="#">Item 13</a></li>
<li><a href="#">Item 14</a></li>
</ul>
</li>
<li>
<a href="#">Graphic design</a>
<ul>
<li><a href="#">Item 21</a></li>
<li><a href="#">Item 22</a></li>
<li><a href="#">Item 23</a></li>
<li><a href="#">Item 24</a></li>
</ul>
</li>
<li>
<a href="#">Development tools</a>
<ul>
<li><a href="#">Item 31</a></li>
<li><a href="#">Item 32</a></li>
<li><a href="#">Item 33</a></li>
<li><a href="#">Item 34</a></li>
</ul>
</li>
<li>
<a href="#">Web design</a>
<ul>
<li><a href="#">Item 41</a></li>
<li><a href="#">Item 42</a></li>
<li><a href="#">Item 43</a></li>
<li><a href="#">Item 44</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Work</a>
<ul>
<li>
<a href="#">Work 1</a>
<ul>
<li>
<a href="#">Work 11</a>
<ul>
<li>
<a href="#">Work 111</a>
</li>
<li>
<a href="#">Work 112</a>
</li>
<li>
<a href="#">Work 113</a>
</li>
</ul>
</li>
<li>
<a href="#">Work 12</a>
<ul>
<li>
<a href="#">Work 121</a>
</li>
<li>
<a href="#">Work 122</a>
</li>
<li>
<a href="#">Work 123</a>
</li>
</ul>
</li>
<li>
<a href="#">Work 13</a>
<ul>
<li>
<a href="#">Work 131</a>
</li>
<li>
<a href="#">Work 132</a>
</li>
<li>
<a href="#">Work 133</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Work 2</a>
<ul>
<li>
<a href="#">Work 21</a>
<ul>
<li>
<a href="#">Work 211</a>
</li>
<li>
<a href="#">Work 212</a>
</li>
<li>
<a href="#">Work 213</a>
</li>
</ul>
</li>
<li>
<a href="#">Work 22</a>
<ul>
<li>
<a href="#">Work 221</a>
</li>
<li>
<a href="#">Work 222</a>
</li>
<li>
<a href="#">Work 223</a>
</li>
</ul>
</li>
<li>
<a href="#">Work 23</a>
<ul>
<li>
<a href="#">Work 231</a>
</li>
<li>
<a href="#">Work 232</a>
</li>
<li>
<a href="#">Work 233</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Work 3</a>
<ul>
<li>
<a href="#">Work 31</a>
<ul>
<li>
<a href="#">Work 311</a>
</li>
<li>
<a href="#">Work 312</a>
</li>
<li>
<a href="#">Work 313</a>
</li>
</ul>
</li>
<li>
<a href="#">Work 32</a>
<ul>
<li>
<a href="#">Work 321</a>
</li>
<li>
<a href="#">Work 322</a>
</li>
<li>
<a href="#">Work 323</a>
</li>
</ul>
</li>
<li>
<a href="#">Work 33</a>
<ul>
<li>
<a href="#">Work 331</a>
</li>
<li>
<a href="#">Work 332</a>
</li>
<li>
<a href="#">Work 333</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Contact</a>
</li>
<li>
<a href="#">ESSAI</a><div class="dropdown_4columns">
<ul><div class="col_4">
<li>
<a href="#">Essai1</a>

</li>
<li>
<a href="#">Essai1</a>

</li>
<li>
<a href="#">Essai1</a>

</li>
<li>
<a href="#">Essai1</a>

</li>
</ul></div>
<ul><div class="col_4">
<li>
<a href="#">Essai2</a>

</li>
<li>
<a href="#">Essai2</a>

</li>
<li>
<a href="#">Essai2</a>

</li>
<li>
<a href="#">Essai2</a>

</li></div>
</ul></div></li>
</li>
</ul>

. . . . . . . . . . .

Celui-ci tel qu'il me va très bien en terme de design. Toutefois, au lieu que le menu se déroule en liens classique
Ex:
MENU - sous menu 1
- sous menu 2 - lien 1
- lien 2
- sous menu 3

Je voudrais qu'il fonctionne comme sur le site cdiscount.fr (menu horizontal)

C'est à dire, les catégories sur la barre horizontale, puis les sous catégories, avec les liens en forme de listes dans un grand rectangle, côté à côte, pas d'inombrale sous menu ou on galère pour aller cliquer son lien, mais tout les liens d'une famille sur un seul rolhover

Catégorie 1 - Catégorie 2 - Catégorie 3 - Catégorie 4 (si on position sur Cat2 ==>)
Famille Catégorie 2
Sous Famille 1 Sous Famille 2 Sous Famille 3
- lien 1 - lien 1 - lien 1
- lien 2 - lien 2 - lien 2
- lien 3 - lien 3 - lien 3

Et franchement je galère, je trouve pas la solution.
Si quelqu'un peut me sortir de la. Je remercie grandement.
Bonne soirée.

A voir également:

1 réponse

Réponse 1 / 1
konji
9 nov. 2012 à 11:14
Bonjour quelques corrections qui pourront vous aider à comprendre ce que vous voulez faire:

Je souhaite incorporer un menu dynamique en Html Css dans mon site web.
Ce ne sont pas des menus dynamique, un menu dynamique est un menu dont le contenu(nom de chaque élément) va changer en fonction d'une base de données par le biais d'un programme. Vous voulez un menu qui fassse quoi? Si vous voulez qu'il bouge (tout seul)il faut utiliser flash, javascript, si vous voulez un menu déroulant HTML et CSS suffiront.

J'ai pour cela pris 2 scripts (1 pour le design, l'autre pour les fonctions)
Encore une fois vous faites erreurs. Les scripts sont de la programmation et ni htmlni css n'est de la programmation. Les fonctions sont des commandes de programmation.
HTML sert à mettre des éléments de la page(balises) et css à faire qu'ils aient une joli apparence.

Je souhaite fusionner ces deux derniers, pour obtenir les fonctions de l'un avec le design de l'autre.

CSS signifie feuille de styles en cascade. Il fait référence à des balises html qui vont avoir des propriétés que l'on va pouvoir changer comme les dimensions, les couleurs , les bordures, les images de fonds etc...
HTML est le langage(unique) d'affichage des éléments sur les pages web. Donc si vous voulez une page vous avez besoin de html, si voulez qu'elle ressemble à autre chose qu'un fond blanc avec du texte noir utilisez CSS en compléments de HTML.


Comme je m'y retrouve pas trop dans les sources, Commencer par le début(une page de texte vide) et apprenez HTML et CSS ce sera mieux que d'essayer de faire des choses que d'utiliser des choses que vous ne comprenez pas et des termes qui n'ont rien à voir avec ce que vous voulez.
0
Roce
10 nov. 2012 à 13:43
C'est gentil de réponse. Mais c'est jouer sur les mots là. Si j'avais le temps je m'y serais m'y, mais malheureusement c'est pas quelque chose qui s'apprend en claquant des doigts.

Merci quand même, je vais me débrouiller.
0

Discussions similaires

Point d'entrée introuvable dans KERNEL32.dll
Anthony -
VrOMAX -

8 réponses
point d'entrée de procédure introuvable
lamarche dominique -
Pat28 -

7 réponses
Point d'entrée introuvable
XShadow64 -
billmaxime -

3 réponses
l'espace 2fusion transparences correspond pas à l'espace colorim
nourchannousa -
contrariness -

7 réponses
Excel fusion de cellules
mike -
Raph -

39 réponses