T3 framework et affix menu

ghazal a répondu

03/08/2013, 20h11
Re : T3 framework et affix menu

la maintenant ca marche mais tout mes css deviennent voireux ...

euh ... foireux, non ?
Une petite fatigue ?
Moi aussi ...
Je regarde ca demain ?
Laisser un commentaire:
y.berges a répondu

03/08/2013, 19h45
Re : T3 framework et affix menu

hello
alors on est pas loin du tout !
la maintenant ca marche mais tout mes css deviennent voireux ...
voici le js que je charge ..

Code:

/// (function($) { $(document).ready(function(){ $('.t3-mainnav').affix({ offset: { top: 30 } }); }); }(jQuery));

c'est quoi le soucis a ton avis ?
Merci
Laisser un commentaire:
y.berges a répondu

03/08/2013, 18h35
Re : T3 framework et affix menu

cool merci encore je vais tester ..
cest bon a savoir ... que tu bosses sur autant de frame... ton avis ton préférer. .. ca m'intéresse
a plus
Laisser un commentaire:
ghazal a répondu

03/08/2013, 18h16
Re : T3 framework et affix menu

Excuse.
Je bosse avec 4 frameworks en même temps (gantry, warp, gavick et T3) et parfois j'ai un peu de mal à recadrer qui fait quoi et comment (lol).
Surtout joomlart avec leurs versions t3v2, t3v3 et t3, assez pénible.
Bref.

Bon, partant du principe que tu utilises bien la dernière version t3,
dans :
/templates/ton_template_t3/tpls/blocks/head.php
±ligne 26

Code PHP:

<?php // CUSTOM CSS if(is_file(T3_TEMPLATE_PATH . '/css/custom.css')) { $this->addStyleSheet(T3_TEMPLATE_URL.'/css/custom.css'); } // ligne à rajouter $this->addScript (T3_TEMPLATE_URL.'/js/monscript.js'); ?>

après avoir créé un fichier monscript.js (localisé dans le dossier "js" du template) avec le script JS pour affix.

Là, c'est clean -> Un script js affecté à un effet en front-end et localisé dans le dossier du template et non pas dans le dossier du plugin t3, où il n'aurait pas sa place.
Laisser un commentaire:
y.berges a répondu

03/08/2013, 14h08
Re : T3 framework et affix menu

désoler tu peus etre plus explicite
1 je creai un fichier js que je charge par l inclusion dans l administration du t3 avec ton code
2 je rajoute le css dans le custom.css
cest bien ca ?
Laisser un commentaire:
ghazal a répondu

03/08/2013, 13h25
Re : T3 framework et affix menu

Salut,
hmmm, je suis un peu sceptique sur ta propal d'inclusion du code JS dans menu.js
Je pense que tu ferais mieux de créer un nouveau fichier js via les méthodes t3,
et tu y inclus le code que j'ai conçu pour fonctionner dans la head et conflict-free.
Laisser un commentaire:

y.berges a répondu

02/08/2013, 19h45

Re : T3 framework et affix menu

j'ai essayer ton code mais je suis pas sur de moi ...
j'ai donc nettoyer mes essais enlever le js ... etc
voici le code dans menu.js

Code:

/** 
 *------------------------------------------------------------------------------
 * @package       T3 Framework for Joomla!
 *------------------------------------------------------------------------------
 * @copyright     Copyright (C) 2004-2013 JoomlArt.com. All Rights Reserved.
 * @license       GNU General Public License version 2 or later; see LICENSE.txt
 * @authors       JoomlArt, JoomlaBamboo, (contribute to this project at github 
 *                & Google group to become co-author)
 * @Google group: https://groups.google.com/forum/#!forum/t3fw
 * @Link:         http://t3-framework.org 
 *------------------------------------------------------------------------------
 */

!function($){
	var isTouch = 'ontouchstart' in window && !(/hp-tablet/gi).test(navigator.appVersion);

	if(!isTouch){
		$(document).ready(function($){
			// detect animation duration
			var mm_duration = 0;
			$('.t3-megamenu').each (function(){
				if ($(this).data('duration')) mm_duration = $(this).data('duration');
			});
			if (mm_duration) {
				var style = '.t3-megamenu.animate .mega > .mega-dropdown-menu, .t3-megamenu.animate.slide .mega > .mega-dropdown-menu > div {';
				style += 'transition-duration: ' + mm_duration + 'ms;';
				style += '-webkit-transition-duration: ' + mm_duration + 'ms;';
				style += '-ms-transition-duration: ' + mm_duration + 'ms;';
				style += '-o-transition-duration: ' + mm_duration + 'ms;';
				style += '}';
				$('<style type="text/css">'+style+'</style>').appendTo ('head');
			}

			var mm_timeout = mm_duration ? 100 + mm_duration : 500;

			$('.nav > li, li.mega').hover(function(event) {
				var $this = $(this);
				if ($this.hasClass ('mega')) {
					// add class animate
					$this.addClass ('animating');
					clearTimeout ($this.data('animatingTimeout'));
					$this.data('animatingTimeout', 
						setTimeout(function(){$this.removeClass ('animating')}, mm_timeout));

					clearTimeout ($this.data('hoverTimeout'));
					$this.data('hoverTimeout', 
						setTimeout(function(){$this.addClass ('open')}, 100));
				} else {
					clearTimeout ($this.data('hoverTimeout'));
					$this.data('hoverTimeout', 
						setTimeout(function(){$this.addClass ('open')}, 100));
				}
			},
			function(event) {
				var $this = $(this);
				if ($this.hasClass ('mega')) {
					$this.addClass ('animating');
					clearTimeout ($this.data('animatingTimeout'));
					$this.data('animatingTimeout', 
						setTimeout(function(){$this.removeClass ('animating')}, mm_timeout));
					clearTimeout ($this.data('hoverTimeout'));
					$this.data('hoverTimeout', 
						setTimeout(function(){$this.removeClass ('open')}, 100));
				} else {
					clearTimeout ($this.data('hoverTimeout'));
					$this.data('hoverTimeout', 
						setTimeout(function(){$this.removeClass ('open')}, 100));
				}
			});
		});

	}
	(function($) {
      
   $(document).ready(function(){
   

      $('.t3-mainnav').affix({
        offset: {
          top: 30
      }
      

}); 
}(jQuery);

et le code dans le custom.css

Code:

/* fond header */
.background {
  background: url("../images/banniere.jpg") repeat-x;
  margin-top: -36px;
}
.t3-header {
  padding-bottom: 0px !important;
  padding-top: 0px !important;
}
/* clean menu */
.t3-mainnav {
  background-color: transparent !important;
  background-image: none !important;
  background-repeat: repeat-x;
  border-bottom: 0px solid #CCCCCC !important;
  border-top: 0px solid #E6E6E6 !important;
}
.t3-mainnav .navbar .nav > li > a {
  border-right: 0px solid #D9D9D9 !important;
  border-top: 0 none;
  padding: 10px 20px;
  text-shadow: none;
}
.affix{top:0px; background: purple}
.affix-top{top:10px; background: green}
/* logo */
.logo-image a {
  background-repeat: no-repeat;
  height: 200px !important;
  width: 651px !important;
}
.head-search {
  float: right;
  margin-top: 80px !important;
}

Merci de ton aide

Laisser un commentaire:

ghazal a répondu

02/08/2013, 19h28
Re : T3 framework et affix menu

OK, j'ai pigé.
* tu vires le JS que tu as collé avant </body> (vu, lol) qui te génère une erreur

* il serait préférable de coller ceci dans un des fichiers JS de T3, comme menu.js, tout à la fin
plugin/ststem/t3/base/js/menu.js

Code PHP:

/// (function($) { $(document).ready(function(){ $('.t3-mainnav').affix({ offset: { top: 30 } }); }); }(jQuery));

tu peux jouer avec top:30 ou top:10, etc ....

tu testes avec ces CSS
.affix{top:0px; background: purple}
.affix-top{top:10px; background: green}

je t'ai mis des couleurs, pour que tu voies ce qu'il se passe et tu corriges ce qui cloche via les CSS
Laisser un commentaire:
y.berges a répondu

02/08/2013, 14h10
Re : T3 framework et affix menu

oki
ce que je ne comprpas c'est que dans la doc il parle de la faire avec et sans javascript ...
Laisser un commentaire:
ghazal a répondu

02/08/2013, 12h44
Re : T3 framework et affix menu

cest quand même bizarre le peu de doc...

Tout à fait.

C'est pourquoi ce genre d'initiative est précieuse:

http://bootply.com/tagged/affix
Laisser un commentaire:
y.berges a répondu

02/08/2013, 11h44
Re : T3 framework et affix menu

cest quand même bizarre le peu de doc...
Laisser un commentaire:
ghazal a répondu

02/08/2013, 11h14
Re : T3 framework et affix menu

Salut,
pas simple comme question.
Affix est géré à la fois par les sélecteurs CSS:
* .affix, .affix-top et .affix-bottom
* ainsi que leur "container"
* et du JS.

Je te conseillerai de regarder les solutions proposées ici :

http://bootply.com/tagged/affix

NB : encore moins simple, la doc de getbootstrap.com s'applique à bootstrap v3, nous utilisons encore la v2.3.2, donc il faut regarder ici :

Bootstrap

http://getbootstrap.com/2.3.2/

plus précisément ici pour affix :

Javascript · Bootstrap

http://getbootstrap.com/2.3.2/javascript.html

Si tu ne t'en sors pas, tu peux toujours coller le menu en haut de ta fenêtre, au dessus du slider.
Laisser un commentaire:
y.berges a répondu

01/08/2013, 13h31
Re : T3 framework et affix menu

hello alors je viens de faire un test

Code:

<div data-offset-top="0" data-spy="affix"> <div class="nav-collapse collapse<?php echo $this->getParam('navigation_collapse_showsub', 1) ? ' always-show' : '' ?>"> <?php if ($this->getParam('navigation_type') == 'megamenu') : ?> <?php $this->megamenu($this->getParam('mm_type', 'mainmenu')) ?> <?php else : ?> <jdoc:include type="modules" name="<?php $this->_p('mainnav') ?>" style="raw" /> <?php endif ?> </div> </div> </div>

a voir sur ce site

Oups ! Cette page n'existe pas...

http://legribouillard.com/newgribou/

Oups ! Cette page n'existe pas... Nous n'avons pas de page à l'adresse que vous avez demandée, désolé!Vous pouvez utiliser les menus pour naviguer vers d'autres...

le soucis c'est que que le menu est bien fixe je voudrais qu'il le soit en haut de la page .. des idées ?
Merci
Laisser un commentaire:
y.berges a répondu

01/08/2013, 13h21
Re : T3 framework et affix menu

ok merci
Laisser un commentaire:
ghazal a répondu

01/08/2013, 10h56
Re : T3 framework et affix menu

Salut,
il y a déjà eu une grosse discussion sur affix :
[RÉGLÉ] Utilisation d'Affix et design tout en hauteur ? - Page 2

Utilisation d'Affix et design tout en hauteur ? - Forums Joomla.fr

http://forum.joomla.fr/showthread.php?181664-Utilisation-d-Affix-et-design-tout-en-hauteur/page2

questions concernant la personnalisation graphique de Joomla 3.x et Bootstrap

la réponse 18 de Lomart te donnera peut-être un début de piste.
Laisser un commentaire:

Laisser un commentaire:

Laisser un commentaire:

Laisser un commentaire:

Laisser un commentaire:

Laisser un commentaire:

Laisser un commentaire:

Laisser un commentaire:

Laisser un commentaire:

Laisser un commentaire:

Laisser un commentaire:

Laisser un commentaire:

Laisser un commentaire:

Laisser un commentaire:

Laisser un commentaire:

Laisser un commentaire:

Annonce

Partenaire de l'association