Выделение активного пункта меню

Тема в разделе "JavaScript", создана пользователем arsen, 4 фев 2014.

Модераторы: ZiX
  1. arsen

    arsen НЕрядовой

    Регистр.:
    16 июн 2011
    Сообщения:
    857
    Симпатии:
    305
    Здравствуйте
    подскажите как выделить активный пункт меню
    для ясности :
    1 это модуль меню open cart
    привожу файлы css
    Код:
    #supermenu {
        text-align:center;
        background-color: #ececec;
        height: 40px;
        margin-bottom: 15px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -khtml-border-radius: 3px;
        border-radius: 3px;
    
        margin-left:17px;
        margin-right:17px;
    }
    #supermenu ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #supermenu ul li.tlli {
      width:165px;
        position: relative;
        float: left;
       
        z-index: 20;
        padding: 0px 0px 0px 0px;
    }
    
    #supermenu ul li.tlli:hover {
        z-index: 100;
    }
    
    #supermenu ul li a.tll {
        font-size: 15px;
        color: #3b3b3b;
        font-weight: bold;
        line-height: 14px;
        text-decoration: none;
        display: block;
        padding: 13px 10px 13px 10px;
        z-index: 6;
        position: relative;
        text-shadow: 0 0 1px #fff;
    }
    #supermenu ul li.tlli:hover a.tll {
        background: #1f6fac;
        color:#ffffff;
        text-shadow: 0 0 1px #1f6fac;
    }
    
    
    #supermenu ul li div.bigdiv {
        display: none;
        background: #1f6fac;
        position: absolute;
        z-index: 5;
        padding: 5px;
        padding-bottom: 15px;
        width: 970px;
        -webkit-border-radius: 0px 0px 5px 5px;
        -moz-border-radius: 0px 0px 5px 5px;
        -khtml-border-radius: 0px 0px 5px 5px;
        border-radius: 0px 0px 5px 5px;
        -webkit-box-shadow: 0px 3px 3px #fff;
        -moz-box-shadow: 0px 3px 3px #fff;
        box-shadow: 0px 3px 3px #fff;
    }
    #supermenu ul li.tlli.act div.bigdiv {
        display: table;
       
    }
    
    #supermenu > ul > li > div > ul {
        display: table-cell;
    }
    #supermenu > ul > li ul + ul {
        padding-left: 20px;
    }
    #supermenu  ul  li  div  .withchild ul.child-level li a {
        text-decoration: none;
        padding: 4px;
        color: #FFFFFF;
        display: block;
        min-width: 120px;
    }
    #supermenu  ul  li  div  .withchild ul.child-level li a:hover {
        background: #555;
    }
    #supermenu  ul  li  div .supermenu-left {
        display: inline-block;
        float: left;
        vertical-align: top;
    }
    #supermenu  ul  li  div .menu-add {
        width: 200px;
        margin-left: 5px;
        height: 100%;
        overflow: hidden;
        float: right;
        vertical-align: bottom;
        display: inline-block;
    }
    #supermenu  ul  li  div .menu-add img {
        float: right;
        margin-top: 10px;
    }
    #supermenu  ul  li  div .withoutchild {
        display: block;
        margin-top: 5px;
    }
    #supermenu  ul  li  div .withoutchild .withchild {
        display: inline-block;
        margin-left: 10px;
        width: 173px;
        margin-top: 10px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -khtml-border-radius: 3px;
        border-radius: 3px;
    }
    #supermenu  ul  li  div .withoutchild .withchild a {
        font-size: 13px;
        color: #fff;
        text-decoration: none;
        vertical-align: top;
    }
    #supermenu  ul  li  div  .withchild {
        display: inline-block;
        width: 173px;
        margin-left: 10px;
        border: 1px solid #555;
        margin-top: 10px;
        vertical-align: top;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        -khtml-border-radius: 2px;
        border-radius: 2px;
    }
    #supermenu  ul  li  div  .withchild ul.child-level li a {
        padding: 5px;
    }
    #supermenu  ul  li  div  .withchild a.theparent {
        color: #fff;
        background: #444;
        border-bottom: 1px solid #333;
        display: block;
        padding: 5px;
        text-decoration: none;
        font-weight: bold;
    }
    #supermenu  ul  li  div .withoutchild .withchild a:hover, #supermenu  ul  li  div  .withchild a.theparent:hover {
        background: #333;
    }
    #supermenu  ul  li  div .withimage {
        display: inline-block;
        vertical-align: top;
        margin-left: 10px;
        width: 173px;
        margin-top: 10px;
        text-align:left;
    }
    #supermenu  ul  li  div .withimage .image img {
        border: 4px solid #fff;
        background: #fff;
        -webkit-border-radius: 30px 30px 30px 30px;
        -moz-border-radius: 30px 30px 30px 30px;
        -khtml-border-radius: 30px 30px 30px 30px;
        border-radius: 30px 30px 30px 30px;
    
    
    }
    #supermenu  ul  li  div .withimage .image img:hover {
        border: 4px solid #fff;
        text-align:left;
    }
    #supermenu  ul  li  div .withimage .name a {
    text-align:left;
        color: #fff;
        font-weight: bold;
        font-size: 13px;
        text-decoration: none;
    }
    #supermenu  ul  li  div .withimage .child-level a {
    text-align:left;
        text-decoration: none;
        color: #fff;
        font-weight: normal;
        font-size: 12px;
    }
    #supermenu  ul  li  div .withimage .child-level {
        margin-left: 5px;
    }
    #supermenu  ul  li  div .withimage .name a:hover {
        text-decoration: underline;
    }
    #active{
    color:#ffffff;
    }
    
    js файл-как я понял отвечает за выпадающее меню
    Код:
    $(document).ready(function() {
       
        $('#supermenu ul > li > a + div').each(function(index, element) {   
           
            var supermenu = $('#supermenu').offset();
            var ddown = $(this).parent().offset();
           
            i = (ddown.left + $(this).outerWidth()) - (supermenu.left + $('#supermenu').outerWidth());
           
            if (i > 0) {
                $(this).css('margin-left', '-' + (i + 5) + 'px');
            }
        });
    });
    tpl файл - собственно сам вывод меню на странице
     
  2. arsen

    arsen НЕрядовой

    Регистр.:
    16 июн 2011
    Сообщения:
    857
    Симпатии:
    305
    Код:
    <?php if ($mitems) { ?>
    <link rel="stylesheet" type="text/css" href="catalog/view/supermenu/supermenu.css" />
    <!--[if IE 7]>
    <link rel="stylesheet" type="text/css" href="catalog/view/supermenu/supermenuie7.css" />
    <![endif]-->
    <!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="catalog/view/supermenu/supermenuie6.css" />
    <![endif]-->
    <?php if ($supermenu_settings_status) { ?>
    <style type="text/css">
    <?php if ($supermenu_settings['bg']) { ?>
      #supermenu {
      background-color: <?php echo $supermenu_settings['bg']; ?>;
      }
      #supermenu ul li a.tll {
        text-shadow: 0 0 1px <?php echo $supermenu_settings['bg']; ?>;
        }
    <?php } ?>
    <?php if ($supermenu_settings['tlc']) { ?>
      #supermenu ul li a.tll {
      color: <?php echo $supermenu_settings['tlc']; ?>;
      }
    <?php } ?>
    <?php if ($supermenu_settings['dbg']) { ?>
      #supermenu ul li.tlli:hover a.tll {
      background: <?php echo $supermenu_settings['dbg']; ?>;
      }
      #supermenu ul li div.bigdiv {
        background: <?php echo $supermenu_settings['dbg']; ?>;
      }
    <?php } ?>
    <?php if ($supermenu_settings['slc']) { ?>
      #supermenu  ul  li  div  .withchild a.theparent, #supermenu  ul  li  div .withimage .name a {
      color: <?php echo $supermenu_settings['slc']; ?>;
      }
    <?php } ?>
    <?php if ($supermenu_settings['slbg']) { ?>
      #supermenu  ul  li  div  .withchild a.theparent {
      background: <?php echo $supermenu_settings['slbg']; ?>;
      border-bottom: none;
      }
      #supermenu  ul  li  div .withimage .image img {
        border: 4px solid <?php echo $supermenu_settings['slbg']; ?>;
      }
    <?php } ?>
    <?php if ($supermenu_settings['slbgh']) { ?>
      #supermenu ul li div .withchild {
      border: 1px solid <?php echo $supermenu_settings['slbgh']; ?>;
      }
      #supermenu  ul  li  div .withoutchild .withchild a:hover, #supermenu  ul  li  div  .withchild a.theparent:hover {
      background: <?php echo $supermenu_settings['slbgh']; ?>;
      }
      #supermenu  ul  li  div  .withchild ul.child-level li a:hover {
        background: <?php echo $supermenu_settings['slbgh']; ?>;
      }
      #supermenu  ul  li  div .withimage .image img:hover {
        border: 4px solid <?php echo $supermenu_settings['slbgh']; ?>;
      }
    <?php } ?>
    <?php if ($supermenu_settings['thlc']) { ?>
      #supermenu  ul  li  div  .withchild ul.child-level li a, #supermenu  ul  li  div .withimage .child-level a {
      color: <?php echo $supermenu_settings['thlc']; ?>;
      }
    <?php } ?>
    </style>
    <?php } ?>
    <script type="text/javascript" src="catalog/view/supermenu/supermenu.js"></script>
    <script type="text/javascript" src="catalog/view/supermenu/jquery.hoverIntent.minified.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    
    $("#supermenu ul li.tlli").hoverIntent(function() {
            $(this).find('.bigdiv').slideDown('fast');
            $('#supermenu ul li.tlli .bigdiv').addClass('act');
       
        } , function() {
            $(this).find('.bigdiv').slideUp('fast');
            $('#supermenu ul li.tlli .bigdiv').removeClass('act');
    });
    
    });
    </script>
    <script type="text/javascript">
    
    </script>
    <div id="supermenu">
      <ul>
        <?php foreach ($mitems as $mitem) { ?>
        <li class="tlli" <?php if ($mitem['tlstyle']) { ?>style="<?php echo $mitem['tlstyle']; ?>" <?php } ?>>
       
       
            <a class="tll" <?php if ($mitem['tlcolor']) { ?>style="color: <?php echo $mitem['tlcolor']; ?>;" <?php } ?><?php if ($mitem['href']) { ?>href="<?php echo $mitem['href']; ?>"<?php } ?> onclick="SelectLink(this)"><?php echo $mitem['name']; ?></a>
     
       
        <?php if ($mitem['children'] || ($mitem['chtml'] && $mitem['chtml'] == 1)) { ?>
        <div class="bigdiv"<?php if ($mitem['dwidth']) { ?> style="width: <?php echo $mitem['dwidth']; ?>px;"<?php } ?>>
       
          <?php if (!$mitem['dwidth']) { ?>
          <?php if ($mitem['add'] || ($mitem['chtml'] && $mitem['chtml'] == 2)) { ?><div class="supermenu-left" style="width: 755px;"><?php } else { ?><div class="supermenu-left" style="width: 960px;"><?php } ?>
          <?php } else { ?>
          <?php if ($mitem['add'] || ($mitem['chtml'] && $mitem['chtml'] == 2)) { ?><div class="supermenu-left"  style="width: <?php echo $mitem['ddwidth']; ?>px;"><?php } else { ?><div class="supermenu-left"  style="width: <?php echo $mitem['dwidth']; ?>px;"><?php } ?>
          <?php } ?>
          <?php if ($mitem['chtml'] && $mitem['chtml'] == 1) { ?><?php echo $mitem['cchtml']; ?><?php } ?>
         
          <?php if ($mitem['chtml'] && $mitem['chtml'] == 3) { ?><div style="display: block;"><?php echo $mitem['cchtml']; ?></div><?php } ?>
         
          <?php if (!$mitem['chtml'] || $mitem['chtml'] == 2 || $mitem['chtml'] == 3) { ?>
         
          <?php if (!$mitem['view']) { ?>
              <?php foreach ($mitem['children'] as $mildren) { ?>
              <?php if ($mildren['gchildren']) { ?>
                <div class="withchild"<?php if ($mitem['iwidth']) { ?> style="width: <?php echo $mitem['iwidth']; ?>px;"<?php } ?>>
                <a class="theparent" href="<?php echo $mildren['href']; ?>"><?php echo $mildren['name']; ?></a>
                  <ul class="child-level">
                    <?php foreach ($mildren['gchildren'] as $gmildren) { ?>
                    <li><a style="font-weight: bold;" href="<?php echo $gmildren['href']; ?>"><?php echo $gmildren['name']; ?></a></li>
                    <?php } ?>
                  </ul>
                </div>
              <?php } ?>
              <?php } ?>
              <div class="withoutchild">
              <?php foreach ($mitem['children'] as $mildren) { ?>
                <?php if (!$mildren['gchildren']) { ?>
                <div class="withchild"<?php if ($mitem['iwidth']) { ?> style="width: <?php echo $mitem['iwidth']; ?>px;"<?php } ?>>
                  <a class="theparent" href="<?php echo $mildren['href']; ?>"><?php echo $mildren['name']; ?></a>
                </div>
                <?php } ?>
              <?php } ?>
              </div>
          <?php } else { ?>
              <?php foreach ($mitem['children'] as $mildren) { ?>
              <div class="withimage"<?php if ($mitem['iwidth']) { ?> style="width: <?php echo $mitem['iwidth']; ?>px;"<?php } ?>>
                <div class="image">
                <a href="<?php echo $mildren['href']; ?>"><img src="<?php echo $mildren['thumb']; ?>" alt="<?php echo $mildren['name']; ?>" title="<?php echo $mildren['name']; ?>" /></a>
                </div>
                <div class="name">
                <a class="nname" href="<?php echo $mildren['href']; ?>"><?php echo $mildren['name']; ?></a>
                <?php if ($mildren['gchildren']) { ?>
                  <ul class="child-level">
                  <?php foreach ($mildren['gchildren'] as $gmildren) { ?>
                    <li><a href="<?php echo $gmildren['href']; ?>">+ <?php echo $gmildren['name']; ?></a></li>
                  <?php } ?>
                  </ul>
                <?php } ?>
                </div>
              </div>
              <?php } ?>
          <?php } ?>
          <?php } ?>
          </div>
          <?php if ($mitem['add'] || ($mitem['chtml'] && $mitem['chtml'] == 2)) { ?>
          <div class="menu-add">
            <?php if ($mitem['chtml'] && $mitem['chtml'] == 2) { ?>
            <?php echo $mitem['cchtml']; ?>
            <?php } else { ?>
            <a <?php if ($mitem['addurl']) { ?>href="<?php echo $mitem['addurl']; ?>"<?php } ?>><img src="image/<?php echo $mitem['add']; ?>" alt="<?php echo $mitem['name']; ?>" /></a>
            <?php } ?>
          </div>
          <?php } ?>
        </div>
        <?php } ?>
      </li>
      <?php } ?>
    </ul>
    </div>
    <?php } ?>
    Подскажите что сделать
    Пробовал в css аналогично с hover реализовать active без результата
    рекомендовали использовать js поясняли что решение простое,только пока я доехать никак не могу
    ps для модеров - в 2 сообщения тк в одно все не влезло.
     
  3. ZOLK

    ZOLK

    Регистр.:
    13 сен 2011
    Сообщения:
    189
    Симпатии:
    107
    Я сильно не вдавался в подробности твое когда, помоему меню это слишком замороченно, но лови код JQ для добавление класса Active к эллементу списка A применительно к твоему меню:

    Код:
    $('li.tlli a').click(function(e) {
            e.preventDefault();
            $('a').removeClass('active');
            $(this).addClass('active');
    });
    
    Можешь еще так дописать li.tlli a.tlli
    
    Вот демо на фидле: http://jsfiddle.net/rq9UB/
     
  4. user8730

    user8730 Создатель

    Регистр.:
    16 авг 2014
    Сообщения:
    27
    Симпатии:
    7
    при выводе через движок сайта в пункте меню присваивать класс "active" - и соответственно этому классу в CSS желаемое выделение