Navigation Latérale

Ven 23 Nov 2012 - 22:26

Taktiik

Age : 29Messages : 2292

Ven 23 Nov 2012 - 22:26

Rappel du premier message :

Note : Apparemment, il y aurait des bugs, ne pas utiliser pour le moment.

#css #css3 #html #jquery #navigation #position_fixe #auteur_Taktiik #phpBB2

Barre Latérale de Menu : V 1.5

Dernière mise à jour : 06 Avril 2013

Aperçu	Préparation	Détails
W W W	Afin d'avoir un affichage optimisé et exactement comme sur l'exemple précédent, voici les réglages à faire dans votre Panneau d'administration : ? Général> Configuration : • Largeur du forum (nombre ou %) : 700 ? Affichage> En-tête & Navigation : • Afficher seulement des images dans la barre des liens : Non • Forcer la barre de navigation à rester sur une ligne : Oui Ceci fait, vous pouvez maintenant poursuivre et débuter l'astuce. Pour toutes questions, n'hésitez pas à me MP ou m'envoyer un email : taktiik69@gmail.com, si j'oublie de répondre, et j'insiste à nouveau : Sparrow Style a dit : Quoi qu'il en soit, si vous utilisez ce tutoriel pour personnaliser l'apparence de votre forum, je vous demande de mettre un crédit à Never-Utopia sur votre accueil, de manière lisible cela va de soi, en guise de remerciement pour l'aide que nous vous avons apportée.	Niveau : Facile Fait : 23/11/2012 Type : Astuce

V

oici une astuce dans laquelle je vous donne un menu latéral de navigation rapide.
Je l'ai adapté grâce à Ce tutoriel pour que l'interaction des membres soit effective. Bien entendu, la seule chose que je vous demande, c'est de mettre un crédit qui redirige ici, vers Never Utopia, en guise de remerciement.
L'esthétique est basique et vous laisse libre choix pour la modifier Wink

Navigation

Menu Ouvrir/Fermer

Partie Template
Partie CSS
Partie JS

Menu toujours ouvert
Partie Template
Partie CSS
Partie JS

Menu avec possibilité de Ouvrir/Fermer

Partie Template

Vous devez donc remplacer votre template Overall_Header par celui-ci :

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}> <head> <title>{SITENAME_TITLE}{PAGE_TITLE}</title> <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" />  <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />  {META_FAVICO} {META} {META_FB_LIKE} <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" /> {T_HEAD_STYLESHEET} {CSS} <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" /> <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" /> <script src="{JQUERY_PATH}" type="text/javascript"></script> <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>  <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script> <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" /> <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>   <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script> <script type="text/javascript">//<![CDATA[ /* Definir le sens de direction en fonction du panneau admin */ var tickerDirParam = "{switch_ticker.DIRECTION}"; var slid_vert = false; var auto_dir = 'next'; var h_perso = parseInt({switch_ticker.HEIGHT}); switch( tickerDirParam ) { case 'top' : slid_vert = true; break; case 'left': break; case 'bottom': slid_vert = true; auto_dir = 'prev'; break; case 'right': auto_dir = 'prev'; break; default: slid_vert = true; } $(document).ready(function() { var w_cont = $('#fa_ticker_container').width(); if (w_cont > 0) { $('#fa_ticker_container').width(w_cont); /* Affichage de la liste */ $('#fa_ticker_content').css('display','block'); /* Calcul des dimensions du conteneur et des elements */ var width_max = $('ul#fa_ticker_content').width(); var width_item = Math.floor(width_max / {switch_ticker.SIZE}); var height_max = h_perso; /* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */ $('ul#fa_ticker_content li').each( function () { if ($(this).height() > height_max) { height_max = $(this).height(); } } ); /* Redimensionnement des elements et des images trop larges */ $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () { if ($(this).width() > width_item) { var ratio = $(this).width() / width_item; var new_height = Math.round($(this).height() / ratio); $(this).height(new_height).width(width_item); } }); /* Redimensionnement et centrage du conteneur en mode vertical */ if (slid_vert) { $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto'); } /* Initialisation du caroussel */ $('#fa_ticker_content').jcarousel({ vertical: slid_vert, wrap: 'circular', auto: {switch_ticker.STOP_TIME}, auto_direction: auto_dir, scroll: 1, size: {switch_ticker.SIZE}, height_max: height_max, animation: {switch_ticker.SPEED} }); } else { $('ul#fa_ticker_content li:not(:first)').css('display','none'); $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center'); } }); //]]> </script>  <script type="text/javascript">//<![CDATA[ $(document).ready(function(){  pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400'); pm.focus();   report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}'); report.focus();   ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});  });  var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;   $(document).ready( function() { $(window).resize(function() { var windowWidth = document.documentElement.clientWidth; var popupWidth = $("#login_popup").width(); var mypopup = $("#login_popup"); $("#login_popup").css({ "left": windowWidth/2 - popupWidth/2 }); }); });  //]]> </script> {GREETING_POPUP}  <style> .jcarousel-skin-tango .jcarousel-item { text-align:center; width: 10px; } .jcarousel-skin-tango .jcarousel-item-horizontal { margin-right: {switch_ticker.SPACING}px; } .jcarousel-skin-tango .jcarousel-item-vertical { margin-bottom: {switch_ticker.SPACING}px; } </style>  {HOSTING_JS}  <script type="text/javascript"> //<![CDATA[ var _gaq = _gaq || []; _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']); _gaq.push(['_trackPageview']); _gaq.push(['_trackPageLoadTime']);  _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']); _gaq.push(['b._trackPageview']);  (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); //]]> </script>  </head> <div id="menu"> <div> <a class="bouton" href="#">Fermer le menu</a><br /> </div> <center><strong>Les News</strong></center> <marquee behavior="scroll" align="center" direction="up" height="80" scrollamount="1" scrolldelay="1" onmouseover='this.stop()' onmouseout='this.start()'> <span style="display: block; text-align: justify; color: #ffffff; font-size: 11px;"> <strong>~ xx/xx/xxxx :</strong> Blablabla<br /> </span> </marquee> <center><strong>Liens rapides</strong></center> <center><em>Principaux</em></center> <a href="/index.htm">Accueil</a><br /> <a href="/search">Recherche</a><br /> <a href="/memberlist">Membres</a><br /> <a href="/groups">Groupes</a><br /> <a href="/profile?mode=editprofile">Profil</a><br />  <a href="/privmsg?folder=inbox" id="mp" alt="Messages Privés">Messages Privés</a><br /> <a href="/login?logout" alt="connexion">Déconnexion</a>   <a href="/login" alt="Connexion">Connexion</a><br /> <a href="/register" alt="S'inscrire">Nous rejoindre</a>  <br /><br /> <center><em>Commandes</em></center> <a href="#" target="_blank">Lien</a><br /> <a href="#" target="_blank">Lien</a><br /> <a href="#" target="_blank">Lien</a><br /> <a href="#" target="_blank">Lien</a><br /> <a href="#" target="_blank">Lien</a><br /> <a href="#" target="_blank">Lien</a><br /> <a href="#" target="_blank">Lien</a><br /> <a href="#" target="_blank">Lien</a><br /> <a href="#" target="_blank">Lien</a> <br /><br /> <br /><br /> <center><a href="#top"><img src="http://www.pixyup.com/uploads/290148104efbb8ca57b2d.png" /></a> <a href="#bottom"><img src="http://www.pixyup.com/uploads/290148244efbb8d8e7c64.png" /></a></center> <a class="bouton2" href="#menu">Ouvrir le menu</a> </div> <div style="visibility:hidden">{GENERATED_NAV_BAR}</div> <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">  <div id="hitskin_preview" style="display: block;"> <h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1> <div class="content"> <p> {hitskin_preview.L_THEME_SITE_PREVIEW} <br /> <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span> </p> </div> </div>   <div id="login_popup"> <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0"> <tr height="25"> <td class="catLeft"> <span class="genmed module-title">{SITENAME}</span> </td> </tr> <tr height="{LOGIN_POPUP_MSG_HEIGHT}"> <td class="row1" align="left" valign="top"> <div id="login_popup_buttons"> <form action="{S_LOGIN_ACTION}" method="get"> <input type="submit" class="mainoption" value="{L_LOGIN}" /> <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" /> <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" /> </form> </div> <span class="genmed">{LOGIN_POPUP_MSG}</span> </td> </tr> </table> </div>  <a name="top"></a> {JAVASCRIPT} <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center"> <tr> <td class="bodyline"> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tr>  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>  <td align="center" width="100%" valign="middle">  <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a> <br />  <div class="maintitle">{MAIN_SITENAME}</div> <br /> <span class="gen">{SITE_DESCRIPTION}<br /> </span> </td>  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>  </tr> </table> <div style="clear: both;"></div>  <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline"> <tr> <td {CLASS_TABLE_TYPE} align="left" class="row1"> <div id="fa_ticker_container"> <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">  <li>{switch_ticker.ticker_row.ELEMENT}</li>  </ul> </div> </td> </tr> </table> </div>   <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline"> <tr> <td {CLASS_TABLE_TYPE} align="left" class="row1"> <div id="fa_ticker_container"> <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;"> <div class="fa_ticker_content">  <div>{switch_ticker.ticker_row.ELEMENT}</div>  </div> </div> </div> </td> </tr> </table> </div>  <div id="page-body"> <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}> <table cellpadding="0" cellspacing="0" width="100%" class="three-col"> <tbody> <tr> <td valign="top" width="{C1SIZE}"> <div id="{ID_LEFT}">  {giefmod_index1.MODVAR}  <div style="height:{SPACE_ROW}px"></div>   </div> </td> <td valign="top" width="100%">  </td> </tr> </tbody> </table> </div> </div> </td> </tr> </table> </body> </html>

N'oubliez pas de remplacer les liens dans le code signalez par :" adresse de votre forum" à partir de la l.218
Publiez votre template et dirigez-vous vers votre Feuille de style CSS =)!

Partie CSS

Maintenant, Ajoutez ce CSS au votre :

Code:: #menu /*Menu latéral*/ { position: fixed; top: 0; left: 0; margin-left: -160px; background-color: #272727; border-right: 1px #ccc solid; font-family: Arial, serif; width: 150px; height:100%; padding: 10px; opacity : 0.8; -khtml-opacity:0.8; -moz-opacity:0.8; -ms-filter: "alpha(opacity=80)"; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80); filter : alpha(opacity=80); transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; -htm-transition: all 1s; -webkit-transition: all 1s; } .bouton /*Bouton "Fermer le menu"*/ { display: block; text-align: center; background-color: #5d5d5d; border: 1px #ccc solid; color: #ffffff!important; font-weight: bold; text-shadow: none!important; margin: auto; margin-top: 20px; padding: 3px; border-radius: 30px; -moz-border-radius: 30px; -o-border-radius: 30px; -htm-border-radius: 30px; -webkit-border-radius: 30px; } .bouton2 /*Bouton "Ouvrir le menu"*/ { display: block; position: fixed; top: 0; left: 20px; text-align: center; background-color: #5d5d5d; border: 1px #ccc solid; border-top: 0px; color: #ffffff!important; font-weight: bold; padding-left: 10px; padding-right: 10px; text-shadow: none!important; border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; -o-border-radius: 0 0 10px 10px; -htm-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px; } #menu:target /*Ne pas modifier*/ { margin-left: 0; transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; -htm-transition: all 1s; -webkit-transition: all 1s; } #menu a /*Liens du menu*/ { z-index: 1; text-transform: uppercase; font-size: 12px; text-shadow: 1px 1px 0 #000; color: #5e5e5e; }

Partie JS

Créez une nouvelle page JS effective sur "Toutes les pages" et mettez-y :

Code:: jQuery().ready(function(){ var newmp = $("#i_icon_mini_new_message"); if(!newmp.length) return; $("#mp").attr('style','color: darkred; font-weight: bold;'); });

Menu qui reste toujours ouvert