Menu special

[Invité]

Bienvenue, Invité. Veuillez vous connecter ou vous inscrire.

Connexion avec identifiant et mot de passe

[petitjo86]

Bonjour,

J'ai une petite question a vous posez, j'ai vu sur plusieurs site un menu un peu spécial, mais comme un exemple vaut mieux qu'un long disours, pas très explicite, voici ce qui me plait, est ce que vous connaissez un truc qui pourrait permettre de s'adapter à un theme de PragmaMX?

Dans l'attente de vos conseils 

@+ Petit Jo

[shorty]

 je trouve que sa ressemble un peu au nouveaux blocs slide pour pmx 1.12  
Sinon sa à l'aire d'être javascript + html/css

si je ne me trompe le fichier java est :

Code:

// SLIDE GRANDES NEWS

$(document).ready(function(){

// Initialisation des req
window.$my =
{
// Nbe d'elements
nbeElem : parseInt($("#slide1 ul li").length)-1,

// Déclaration des variables
elem : $("#slide1 ul")

};

// ATTRIBUTION CLASS AUX LI DU MENU
// ZOOM FIRST IMG
$("#slide1 li").each(function(index) {
$(this).addClass(''+index+'');
if (index == 0){
$("img", this).css({ 'width' : '135px', 'height' : '90px'});
$(this).css({ 'margin-left' : '-7px' });
}
if (index == 1){
$(this).css({ "margin-top" : "12px" },  { queue:false, duration:500 } );
}
});

// ATTRIBUTION CLASS AUX LI DES NEWS
$("#news_photo li").each(function(index) {
$(this).addClass(''+index+'');
});


// SLIDE UP
$("#slide1Btn .prevBtn").click(function () {
var elem = $my.elem;
var elemclass = elem.attr('class');
var elemclassnew = parseInt(elemclass)-1;

$("#slide1Btn .nextBtn").removeClass('noactiv');

// Taille vignette
if (elemclassnew >= 0){
$("#slide1 li img").animate({ width: "120", height: "79" },  { queue:false, duration:500 } );
$("#slide1 li."+elemclassnew+" img").animate({ width: "135", height: "90" },  { queue:false, duration:500 } );
}

if (elemclassnew <= 0){
elem.removeClass().addClass('0');
$(this).addClass('noactiv');
}else{
$(this).removeClass('noactiv');
elem.removeClass().addClass(''+elemclassnew+'');
}

if (elemclassnew >= 0){

$("#slide1 ul").animate({ "top" : "+=108px" },  { queue:true, duration:500 } );
$("#slide1 li."+(elemclassnew)+"").animate({ "marginTop" : "0", "marginLeft" : "-7px" },  { queue:false, duration:100 } );
$("#slide1 li."+(elemclassnew+1)+"").animate({ "marginTop" : "12px", "marginLeft" : "0" },  { queue:false, duration:100 } );
$("#slide1 li."+(elemclassnew+2)+"").animate({ "marginTop" : "0", "marginLeft" : "0" },  { queue:false, duration:100 } );

//Change news
$("#news_photo li."+(elemclass-1)+"").show('fast', function() {
$("#news_photo li."+(elemclass)+"").fadeOut();
});
}

});

// SLIDE DOWN
$("#slide1Btn .nextBtn").click(function () {
var nbeElem = $my.nbeElem;
var elem = $my.elem;
var elemclass = elem.attr('class');
var elemclassnew = parseInt(elemclass)+1;
$("#slide1Btn .prevBtn").removeClass('noactiv');

// Taille vignette
if (elemclassnew <= nbeElem){
$("#slide1 li img").animate({ width: "120", height: "79" },  { queue:false, duration:500 } );
$("#slide1 li."+elemclassnew+" img").animate({ width: "135", height: "90" },  { queue:false, duration:500 } );
}

if (elemclassnew >= nbeElem){
$(this).addClass('noactiv');
}else{
$(this).removeClass('noactiv');
}

if (elemclassnew <= nbeElem){
elem.removeClass().addClass(''+elemclassnew+'');
$("#slide1 ul").animate({ "top" : "-=108px" },  { queue:true, duration:500 } );
$("#slide1 li."+(elemclassnew-1)+"").animate({ "marginTop" : "0", "marginLeft" : "0" },  { queue:false, duration:100 } );
$("#slide1 li."+elemclassnew+"").animate({ "marginTop" : "0", "marginLeft" : "-7px" },  { queue:false, duration:100 } );
$("#slide1 li."+(elemclassnew+1)+"").animate({ "marginTop" : "12px", "marginLeft" : "0" },  { queue:false, duration:100 } );


//Change news
$("#news_photo li."+elemclassnew+"").fadeIn('slow', function() {
$("#news_photo li."+elemclass+"").hide();
});
}

});

// CLICK PHOTO
$("#slide1 li").click(function () {
var elem = $(this);
var elemul = $my.elem;
var elemUlclass = parseInt(elemul.attr('class'));
var elemclass = elem.attr('class');
elemul.removeClass().addClass(elemclass);

$("#slide1Btn a").removeClass('noactiv');

//Change news
if (elemclass != elemUlclass){
if (elemclass > elemUlclass){
$("#news_photo li."+elemclass+"").fadeIn('slow', function() {
$("#news_photo li."+(elemUlclass)+"").hide();
});
}else{
$("#news_photo li."+(elemclass)+"").show('fast', function() {
$("#news_photo li."+(elemUlclass)+"").fadeOut();
});
}
}
});

// HOVER PHOTO
$("#slide1 li").mouseover(function () {
var elem = $(this);
var elemul = $my.elem;
var elemUlclass = parseInt(elemul.attr('class'));
var elemclass = parseInt(elem.attr('class'));

$("#slide1 li img").animate({ width: "120", height: "79" },  { queue:false, duration:400 } );
$("#slide1 li").animate({ "marginTop" : "0", "marginLeft" : "0" },  { queue:false, duration:100 } );

$("img", this).animate({ width: "135", height: "90" },  { queue:false, duration:400 } );
$(this).animate({ "marginTop" : "0", "marginLeft" : "-7px" },  { queue:false, duration:100 } );

$("#slide1 li."+(elemclass+1)+"").animate({ "marginTop" : "12px", "marginLeft" : "0" },  { queue:false, duration:100 } );

});


});

pour la partie html et css sa doit aussi être récupérable via le code source de leurs pages 

[petitjo86]

Bonjour,

Merci pour ton aide Shorty, mais c'est un peu trop compliqué pour moi, il n'existe pas un truc tout fait, j'ai bien essayé de chercher sur le net, mais je n'ai pas trouvé mon bonheur 

@+ Petit Jo

[stefvar]

Bonjour,
Jöel, avec la partie html fournie par Shorty, ajoute le css suivant et tout devrait rouler 

Code:

/* MENU */
#menu{
clear:both;
background:url(http://statique.foot-national.com/img/menu.png) left 0 no-repeat;
height:40px;
}
#menu li{
float:left;
font:bold italic 12px Arial;
padding:13px 18px 12px 18px;
white-space:nowrap;
color:#fff;
cursor:pointer;
}
#menu li.last{padding:13px 18px 12px 19px;}

#menu li.activ{
background:#fff;
color:#000;
border-radius:2px 2px 0 0;-moz-border-radius:2px 2px 0 0;-webkit-border-radius:2px 2px 0 0;
}
#menu li.off:hover{background:url(http://statique.foot-national.com/img/menu_hover.png);}
#menu li.on{background:url(http://statique.foot-national.com/img/menu_hover1.png);}
#menu li a{color:#fff;}
#menu li.activ a{color:#000;}

#menucont{
position:relative;
background:none repeat scroll 0 0 #1A1A1A;
height:0px;
overflow:hidden;
padding:0;
position:relative;
opacity:0.97;filter:alpha(opacity=97);
}
#menucont .link .col{float:left;margin-left:40px;}
#menucont .link .colmiddle{margin-left:0;width:530px;}
#menucont .link .colfirst{margin:0}
#menucont .link .col .button{margin-bottom:2px;}
#menucont .link{
position:absolute;
display:none;
color:#fff;
padding:18px 0 18px 18px;
}
#menucont .link h2 a, #menucont .link h2 b, #menucont .link li.h2 h2 a{
display:block;
font:bold 13px Arial;
letter-spacing:-1%;
color:#fff;
margin:10px 0 3px 0;
padding:6px 5px 6px 5px;
border-bottom:1px solid #404040;
width:100%;
border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;-webkit-border-radius:4px 4px 0 0;
}
#menucont .link li.h2{margin-top:-7px}
#menucont .link li.h2 h2 a{margin-top:0}
#menucont .link .colmiddle h2 b{margin:0 0 3px 0;padding:0px 5px 6px 5px;}
#menucont .link h2.up b, #menucont .link h2.up a{margin:0 0 3px 0;}
#menucont .link ul{margin:4px 0;}
#menucont .link .colmiddle ul{float:left;margin-left:40px;margin-bottom:10px;}
#menucont .link ul.margneg{margin-top:-2px;}
#menucont .link li a{
display:block;
font-size:100%;
color:#cecece;
line-height:25px;
width:100%;
padding:0 5px;
white-space:nowrap;
border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;
}
#menucont .link .colmiddle a{line-height:20px;}
#menucont .link .margneg li a{line-height:19px;}
#menucont .link li a.bleu{color:#48c0f8}
#menucont .link h2 a:hover, #menucont .link li.h2 h2 a:hover{
background:#282828;
color:#48c0f8;
border-bottom:1px solid transparent;
}
#menucont .link li a:hover{background:#282828;color:#48c0f8;}
#menucont .link li a.aclas{
display:inline;
font:11px Arial;
padding:0 1px;
}
#menucont .link ul.club {
float:left;
margin-right:15px;
}
#menucont .link ul.club li{padding:2px 0 1px 0;}
#menucont .link ul.club img{
border:0;
width:18px;
height:18px;
vertical-align:-4px;
margin-right:6px;
}

/* deroul club logos */
#menucont .link .jqderoul .slide{height:194px;}
#menucont .link .jqderoul.logosclubs a{line-height:22px;}
#menucont .link .logosclubs{
float:left;
width:22px;
height:217px;
overflow:hidden;
margin-right: 15px;
padding-top: 15px;
}
#menucont .link .logosclubs img{padding:2px 0}
#menucont .link .liengroupe{margin-left:30px;width:130px;}
#menucont .link .liengroupe li a{line-height:23px;}
#menucont .logosclubs  a.BtnUp, #menucont .logosclubs a.BtnDown{
left:5px;
background:url(http://statique.foot-national.com/img/fleche_04.png) no-repeat;
width:18px;
height:18px;
}
#menucont .logosclubs  a.BtnUp{top:0px}
#menucont .logosclubs  a.BtnDown{
background-position: 0 -40px;
bottom:0px;
}
#menucont .logosclubs a.BtnUp:hover,#menucont .logosclubs a.BtnDown:hover{opacity : 1;filter : alpha(opacity=100);}
#menucont .logosclubs a.BtnUp:active{top:1px;}
#menucont .logosclubs a.BtnDown:active{bottom:-1px;}
#menucont .logosclubs a.BtnNoActiv{opacity:0.2;filter:alpha(opacity=20);}
#menucont .logosclubs a.BtnNoActiv:hover{opacity:0.2;filter:alpha(opacity=20);}

#menucont .menu_collaboratif h2{margin-top:-2px;}
#menucont .menu_collaboratif a{
display:block;
color:#c9cbc9;
background:url(http://statique.foot-national.com/img/collaboratif.png) 30px 10px no-repeat;
width:220px;
padding-top:145px;
padding-left:5px;
}
#menucont .menu_collaboratif a:hover{color:#34b2e7;}

#menucont ul.dh{float:left; margin-right:15px;}
#menucont ul.dh li{padding-left:5px;clear:both;}
#menucont ul.dh span{
display:block;
float:left;
font-weight:bold;
width:152px;
text-align:right;
line-height:18px;
}
#menucont ul.dh span a{color:#fff}
#menucont ul.dh a{
display:inline;
line-height:18px;
}
#menucont p{
line-height:20px;
color:#CECECE;
}