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

arsen

arsen

НЕрядовой
Регистрация
16 Июн 2011
Сообщения
1.078
Реакции
355
Здравствуйте
подскажите как выделить активный пункт меню
для ясности :
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 файл - собственно сам вывод меню на странице
 
Код: 
<?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 сообщения тк в одно все не влезло.
 
arsen написал(а):
Код: 
<?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 сообщения тк в одно все не влезло.
Нажмите для раскрытия...

Я сильно не вдавался в подробности твое когда, помоему меню это слишком замороченно, но лови код JQ для добавление класса Active к эллементу списка A применительно к твоему меню:

Код: 
$('li.tlli a').click(function(e) {
        e.preventDefault();
        $('a').removeClass('active');
        $(this).addClass('active');
});

Можешь еще так дописать li.tlli a.tlli

Вот демо на фидле: Для просмотра ссылки Войди или Зарегистрируйся
 
при выводе через движок сайта в пункте меню присваивать класс "active" - и соответственно этому классу в CSS желаемое выделение
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху