Перейти к содержанию
Maxik260696

Подсветка активного пункта меню

Рекомендуемые сообщения

Подскажите, как сделать, чтоб активный пункт меню - подсвечивался как hover? Обьясните как последнему дураку.
Подробнее:
Стандартная тема OcStore 2.3.0.2.3, при наведении на пукт меню он подсвечивается (hover), как сделать так, чтобы при открытии этого пункта меню (когда вы находились в этом меню- в категории планшеты к примеру) эта категория постоянно была как hover ?
Если вы откроете категорию Компьютеры - соответственно, чтоб подсвечивалась она как hover

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
2 минуты назад, Maxik260696 сказал:

Подскажите, как сделать, чтоб активный пункт меню - подсвечивался как hover? Обьясните как последнему дураку.
Подробнее:
Стандартная тема OcStore 2.3.0.2.3, при наведении на пукт меню он подсвечивается (hover), как сделать так, чтобы при открытии этого пункта меню (когда вы находились в этом меню- в категории планшеты к примеру) эта категория постоянно была как hover ?
Если вы откроете категорию Компьютеры - соответственно, чтоб подсвечивалась она как hover

скриптом можно

 

само меню

 

<ul class="catalog-prod-ul" id="nav">
<li><a href="....">...</a></li>
<li><a href="....">...</a></li>
<li><a href="....">....</a></li>

скрипт добавит к активному пункту класс active, остаётся только прописать стили этому классу

<script type="text/javascript">$('ul#nav li').each(function () {if (this.getElementsByTagName("a")[0].href == location.href) this.className = "active";});</script>

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
13 hours ago, Gann said:

скрипт добавит к активному пункту класс active, остаётся только прописать стили этому классу


<script type="text/javascript">$('ul#nav li').each(function () {if (this.getElementsByTagName("a")[0].href == location.href) this.className = "active";});</script>

 

Может подскажите что и куда поставить, чтоб скрипт работал. Ибо я уже ставил скрипт и он не работает (а я профан в OcStore)
То есть в какой файл заливать, в какую строчку, и как назвать стиль в ксс

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
18 часов назад, Maxik260696 сказал:

Может подскажите что и куда поставить, чтоб скрипт работал. Ибо я уже ставил скрипт и он не работает (а я профан в OcStore)
То есть в какой файл заливать, в какую строчку, и как назвать стиль в ксс

 

а меню какое? верхнее горизонтальное или боковое? можете скопировать код? ("исходный код страницы" -> код меню)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
6 hours ago, Gann said:

а меню какое? верхнее горизонтальное или боковое? можете скопировать код? ("исходный код страницы" -> код меню)

Стандартный хедер. (верхнее меню)
 

<!DOCTYPE html>
<!--[if IE]><![endif]-->
<!--[if IE 8 ]><html dir="<?php echo $direction; ?>" lang="<?php echo $lang; ?>" class="ie8"><![endif]-->
<!--[if IE 9 ]><html dir="<?php echo $direction; ?>" lang="<?php echo $lang; ?>" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html dir="<?php echo $direction; ?>" lang="<?php echo $lang; ?>">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><?php echo $title;  ?></title>
<base href="<?php echo $base; ?>" />
<?php if ($description) { ?>
<meta name="description" content="<?php echo $description; ?>" />
<?php } ?>
<?php if ($keywords) { ?>
<meta name="keywords" content= "<?php echo $keywords; ?>" />
<?php } ?>
<meta property="og:title" content="<?php echo $title; ?>" />
<meta property="og:type" content="website" />
<meta property="og:url" content="<?php echo $og_url; ?>" />
<?php if ($og_image) { ?>
<meta property="og:image" content="<?php echo $og_image; ?>" />
<?php } else { ?>
<meta property="og:image" content="<?php echo $logo; ?>" />
<?php } ?>
<meta property="og:site_name" content="<?php echo $name; ?>" />
<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
<script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,400i,300,700" rel="stylesheet" type="text/css" />
<link href="catalog/view/theme/default/stylesheet/stylesheet.css" rel="stylesheet">
<?php foreach ($styles as $style) { ?>
<link href="<?php echo $style['href']; ?>" type="text/css" rel="<?php echo $style['rel']; ?>" media="<?php echo $style['media']; ?>" />
<?php } ?>
<script src="catalog/view/javascript/common.js" type="text/javascript"></script>
<?php foreach ($links as $link) { ?>
<link href="<?php echo $link['href']; ?>" rel="<?php echo $link['rel']; ?>" />
<?php } ?>
<?php foreach ($scripts as $script) { ?>
<script src="<?php echo $script; ?>" type="text/javascript"></script>
<?php } ?>
<?php foreach ($analytics as $analytic) { ?>
<?php echo $analytic; ?>
<?php } ?>
</head>
<body class="<?php echo $class; ?>">
<nav id="top">
  <div class="container">
    
    <div id="top-links" class="nav pull-right">
      <ul class="list-inline">
        <li><a href="<?php echo $contact; ?>"><i class="fa fa-phone"></i></a> <span class="hidden-xs hidden-sm hidden-md"><?php echo $telephone; ?></span></li>
        <li><a href="<?php echo $contact; ?>"><i class="fa fa-phone"></i></a> <span class="hidden-xs hidden-sm hidden-md"><?php echo $telephone; ?></span></li>
		<li><a href="<?php echo $contact; ?>"><i class="fa fa-phone"></i></a> <span class="hidden-xs hidden-sm hidden-md"><?php echo $telephone; ?></span></li>
				<li class="dropdown"><a href="<?php echo $account; ?>" title="<?php echo $text_account; ?>" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_account; ?></span> <span class="caret"></span></a>
          <ul class="dropdown-menu dropdown-menu-right">
            <?php if ($logged) { ?>
            <li><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a></li>
            <li><a href="<?php echo $order; ?>"><?php echo $text_order; ?></a></li>
            <li><a href="<?php echo $transaction; ?>"><?php echo $text_transaction; ?></a></li>
            <li><a href="<?php echo $download; ?>"><?php echo $text_download; ?></a></li>
            <li><a href="<?php echo $logout; ?>"><?php echo $text_logout; ?></a></li>
            <?php } else { ?>
            <li><a href="<?php echo $register; ?>"><?php echo $text_register; ?></a></li>
            <li><a href="<?php echo $login; ?>"><?php echo $text_login; ?></a></li>
            <?php } ?>
          </ul>
        </li>
        <li><a href="<?php echo $wishlist; ?>" id="wishlist-total" title="<?php echo $text_wishlist; ?>"><i class="fa fa-heart"></i> <span class="hidden-xs hidden-sm hidden-md"><?php echo $text_wishlist; ?></span></a></li>
       </ul>
    </div>
  </div>
</nav>
<header>
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <div id="logo">
          <?php if ($logo) { ?>
            <?php if ($home == $og_url) { ?>
              <img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" />
            <?php } else { ?>
              <a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" /></a>
            <?php } ?>
          <?php } else { ?>
            <h1><a href="<?php echo $home; ?>"><?php echo $name; ?></a></h1>
          <?php } ?>
        </div>
      </div>
      <div class="col-sm-5"><?php echo $search; ?>
      </div>
      <div class="col-sm-3"><?php echo $cart; ?></div>
    </div>
  </div>
</header>
<?php if ($categories) { ?>
<div class="container">
  <nav id="menu" class="navbar">
    <div class="navbar-header"><span id="category" class="visible-xs"><?php echo $text_category; ?></span>
      <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
        <?php foreach ($categories as $category) { ?>
        <?php if ($category['children']) { ?>
        <li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><?php echo $category['name']; ?></a>
          <div class="dropdown-menu">
            <div class="dropdown-inner">
              <?php foreach (array_chunk($category['children'], ceil(count($category['children']) / $category['column'])) as $children) { ?>
              <ul class="list-unstyled">
                <?php foreach ($children as $child) { ?>
                <li><a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a></li>
                <?php } ?>
              </ul>
              <?php } ?>
            </div>
            <a href="<?php echo $category['href']; ?>" class="see-all"><?php echo $text_all; ?> <?php echo $category['name']; ?></a> </div>
        </li>
        <?php } else { ?>
        <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a></li>
        <?php } ?>
        <?php } ?>
      </ul>
    </div>
  </nav>
</div>
<?php } ?>

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 26.09.2017 в 20:49, Maxik260696 сказал:

Подскажите, как сделать, чтоб активный пункт меню - подсвечивался как hover?

посмотрите модуль category и сделайте по аналогии

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

подправил  под вашу хотелку

стили  в шаблоне(пропишите какие хотите)

    <style>
        .active_nav{
            color:#000 !important;
            background: #06b6ef !important;
        }
        .active_nav_child{
            color:#007fff !important;
        }
    </style>

хотите, перенесите в  файл стилей

header.php

header.tpl

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 26.09.2017 в 21:53, Gann сказал:

скриптом можно

 

само меню

 


<ul class="catalog-prod-ul" id="nav">
<li><a href="....">...</a></li>
<li><a href="....">...</a></li>
<li><a href="....">....</a></li>

скрипт добавит к активному пункту класс active, остаётся только прописать стили этому классу


<script type="text/javascript">$('ul#nav li').each(function () {if (this.getElementsByTagName("a")[0].href == location.href) this.className = "active";});</script>

 

 

Здравствуйте. Подскажите, пожалуйста, как правильно добавить класс active к кнопке переключателя вида товаров на витрине?

<div class="view">
          <div class="btn-group hidden-xs">
            <button type="button" id="list-view" class="btn btn-default"><i class="fa fa-th-list"></i><span class="hidden-xs"> Список</span></button>
            <button type="button" id="grid-view" class="btn btn-default"><i class="fa fa-th"></i><span class="hidden-xs"> Сетка</span></button>
          </div>
		  </div>

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.