Menu na webu

[cz_martin_k]

Zdravím,
předělávám si design webu a narazil jsem na takový zádrhel. Nahoře ty odkazy v menu se otevřou jen pokud kliknu přímo na ten text, ale chtěl bych, aby stačilo kliknout na tu jednu buňku u toho textu. Zkoušel jsem to hledat v šabloně, našel jsem jen toto:

Kód: Vybrat vše

<!-- BEGIN NAVIGATION-WRAPPER -->
         <div id="navigation-wrapper">
         
            <!-- BEGIN NAVIGATION -->
            <ul id="navigation">
               <?php wp_nav_menu( array( 'container' => false, 'theme_location' => 'primary-menu' ) ); ?>
            </ul>
            <!-- END NAVIGATION -->

Je to ono? A co když tak mám upravit?

Děkuji předem za případné rady.

[Qefik]

Obrať se na autora vzhledu, myslím že určitě bude vědět, když ho vytvořil

[cz_martin_k]

To se ti řekne, já to jsem jen tak, tak schopen popsat v češtině, natož v ajině . Ale zkusím to, pokud najdu na něho třeba mail.

[zdenda204]

Autor je již pěknou dobu neaktivní

[Vojko]

Stačí si nájsť prislúšny .js súbor a upraviť si to priamo tam ...

[cz_martin_k]

Mohl by to být tento soubor?

Spoiler: zobrazit

Kód: Vybrat vše

/* SUPERFISH DROPDOWN MENU */
$(document).ready(function() {
   $('ul#navigation').superfish();
   $('ul#top-navigation').superfish();
});

/* TABS */
$(document).ready(function() {
   $("ul.tabs").tabs("> .tab-content");
   $(".tabs-wrapper ul.tabs").tabs("> .tab-content");   
});

/* TOGGLE & GAMEINFO */
$(document).ready(function() {
   
   $(".toggle-content").hide();

   $("h5.toggle").toggle(function(){
      $(this).addClass("active");
      }, function () {
      $(this).removeClass("active");
   });

   $("h5.toggle").click(function(){
      $(this).next(".toggle-content").slideToggle();
   });
   
   $(".gameinfo-content").hide();

   $("h5.gameinfo").toggle(function(){
      $(this).addClass("active");
      }, function () {
      $(this).removeClass("active");
   });

   $("h5.gameinfo").click(function(){
      $(this).next(".gameinfo-content").slideToggle();
   });
   
});


/* SCORE SETTINGS */
$(function() {

   $('.score-bg').animate({width: 'toggle'},{duration: 2000});

});

/* BACK TO TOP */
$(function() {
   $('#back-top a').click(function(){
         
      $('html, body').animate({scrollTop: '0'}, 1000);
         
      return false;
   });
});

/* FANCYBOX */
$(document).ready(function() {
   
   $("a.grouped_elements").fancybox({
         'transitionIn'      : 'fade',
         'transitionOut'      : 'none',
         'titlePosition'    : 'over',
         'titleFormat'      : function(title, currentArray, currentIndex, currentOpts) {
         return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
      }
   });
});

$(document).ready(function() {   
   
   //Calculate the total width - sum of all sub-panels width
   //Width is generated according to the width of #mask * total of sub-panels
   $('#panel').width(parseInt($('#mask').width() * $('#panel div').length));
   
   //Set the sub-panel width according to the #mask width (width of #mask and sub-panel must be same)
   $('#panel div').width($('#mask').width());
   
   //Get all the links with rel as panel
   $('a[rel=panel]').click(function () {
   
      //Get the height of the sub-panel
      var panelheight = $($(this).attr('href')).height();
      
      //Set class for the selected item
      $('a[rel=panel]').removeClass('selected');
      $(this).addClass('selected');
      
      //Resize the height
      $('#mask').animate({'height':panelheight},{queue:false, duration:500});         
      
      //Scroll to the correct panel, the panel id is grabbed from the href attribute of the anchor
      $('#mask').scrollTo($(this).attr('href'), 800);      
      
      //Discard the link default behavior
      return false;
   });
   
});

nebo tento

Spoiler: zobrazit

Kód: Vybrat vše

/*
 * Superfish v1.4.8 - jQuery menu widget
 * Copyright (c) 2008 Joel Birch
 *
 * Dual licensed under the MIT and GPL licenses:
 *    http://www.opensource.org/licenses/mit-license.php
 *    http://www.gnu.org/licenses/gpl.html
 *
 * CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt
 */

;(function($){
   $.fn.superfish = function(op){

      var sf = $.fn.superfish,
         c = sf.c,
         $arrow = $(['<span class="',c.arrowClass,'"> &#187;</span>'].join('')),
         over = function(){
            var $$ = $(this), menu = getMenu($$);
            clearTimeout(menu.sfTimer);
            $$.showSuperfishUl().siblings().hideSuperfishUl();
         },
         out = function(){
            var $$ = $(this), menu = getMenu($$), o = sf.op;
            clearTimeout(menu.sfTimer);
            menu.sfTimer=setTimeout(function(){
               o.retainPath=($.inArray($$[0],o.$path)>-1);
               $$.hideSuperfishUl();
               if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
            },o.delay);   
         },
         getMenu = function($menu){
            var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
            sf.op = sf.o[menu.serial];
            return menu;
         },
         addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); };
         
      return this.each(function() {
         var s = this.serial = sf.o.length;
         var o = $.extend({},sf.defaults,op);
         o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){
            $(this).addClass([o.hoverClass,c.bcClass].join(' '))
               .filter('li:has(ul)').removeClass(o.pathClass);
         });
         sf.o[s] = sf.op = o;
         
         $('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out).each(function() {
            if (o.autoArrows) addArrow( $('>a:first-child',this) );
         })
         .not('.'+c.bcClass)
            .hideSuperfishUl();
         
         var $a = $('a',this);
         $a.each(function(i){
            var $li = $a.eq(i).parents('li');
            $a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});
         });
         o.onInit.call(this);
         
      }).each(function() {
         var menuClasses = [c.menuClass];
         if (sf.op.dropShadows  && !($.browser.msie && $.browser.version < 7)) menuClasses.push(c.shadowClass);
         $(this).addClass(menuClasses.join(' '));
      });
   };

   var sf = $.fn.superfish;
   sf.o = [];
   sf.op = {};
   sf.IE7fix = function(){
      var o = sf.op;
      if ($.browser.msie && $.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined)
         this.toggleClass(sf.c.shadowClass+'-off');
      };
   sf.c = {
      bcClass     : 'sf-breadcrumb',
      menuClass   : 'sf-js-enabled',
      anchorClass : 'sf-with-ul',
      arrowClass  : 'sf-sub-indicator',
      shadowClass : 'sf-shadow'
   };
   sf.defaults = {
      hoverClass   : 'sfHover',
      pathClass   : 'overideThisToUse',
      pathLevels   : 1,
      delay      : 800,
      animation   : {opacity:'show'},
      speed      : 'normal',
      autoArrows   : true,
      dropShadows : true,
      disableHI   : false,      // true disables hoverIntent detection
      onInit      : function(){}, // callback functions
      onBeforeShow: function(){},
      onShow      : function(){},
      onHide      : function(){}
   };
   $.fn.extend({
      hideSuperfishUl : function(){
         var o = sf.op,
            not = (o.retainPath===true) ? o.$path : '';
         o.retainPath = false;
         var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)
               .find('>ul').hide().css('visibility','hidden');
         o.onHide.call($ul);
         return this;
      },
      showSuperfishUl : function(){
         var o = sf.op,
            sh = sf.c.shadowClass+'-off',
            $ul = this.addClass(o.hoverClass)
               .find('>ul:hidden').css('visibility','visible');
         sf.IE7fix.call($ul);
         o.onBeforeShow.call($ul);
         $ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
         return this;
      }
   });

})(jQuery);


A když tak, co tam mám upravit?
Děkuji moc .

[cz_martin_k]

Stačí si nájsť prislúšny .js súbor a upraviť si to priamo tam ...

Jenže tam jsou jen scripty na animace, neni tam úprava toho menu. já potřebuji udělat toto druhou možnost:

Kód: Vybrat vše

1. Navigace, kde musíš najet myší na text (takto to je teď).
<ul>
<li><a href="">Položka 1</a></li>
<li><a href="">Položka 2</a></li>
<li><a href="">Položka 3</a></li>
<li><a href="">Položka 4</a></li>
<li><a href="">Položka 5</a></li>
</ul>
2. Navigace, kde funguje celá buňka (takto to chci mít).
<ul>
<a href=""><li>Položka 1</li></a>
<a href=""><li>Položka 2</li></a>
<a href=""><li>Položka 3</li></a>
<a href=""><li>Položka 4</li></a>
<a href=""><li>Položka 5</li></a>
</ul>

[Mysteria]

Vždyť ti to tak funguje ne? Teda jestli myslíš ten web v podpisu, tak podmenu se mi vysouvá i když nenajedu přímo na ten text.

EDIT: Jo aha, sice se to vysune, ale není to jako odkaz

Style.css, 94 řádek #navigation li a { ... } přidej tam display: block; height: 100%;
Ale není 100%, sice to tlačítko bude celé klikatelné, ale bude posunuté o cca 10px dolů, ale to už si pošteluj sám.
A nainstaluj si Firebug, na tohle se hodí.

[cz_martin_k]

Díky moc, funguje to skvěle, teď si ještě pohraju s tim, abych všude odstranil podtržení a udělal to nějak graficky pěkně. Dávám ti karmu+.