Перейти к содержимому


Модернизация Блока Навигации

Автор Alvel007, 03 марта 2013 18:48

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 25

#1 Alvel007

Alvel007

    Пользователь

  • Пользователи
  • PipPip
  • 43 сообщений

Отправлено 03 Март 2013 - 18:48

Скажите пожалуйста, реально ли организовать верхний блок навигации с выкатными менюшками? Как например на сайте евросети. Чтобы при наведении мышкой на блок меню, выкатывались другие элементы. Например "каталог-телефоны,планшеты, и т.д. Если возможно, расскажите как это реализовать.

#2 mikola

mikola

    Good soo good

  • Модератоpы
  • 1 550 сообщений
  • Городгород Нижний Новгород

Отправлено 03 Март 2013 - 20:10

Просмотр сообщенияAlvel007 (03 Март 2013 - 18:48) писал:

Скажите пожалуйста, реально ли организовать верхний блок навигации с выкатными менюшками? Как например на сайте евросети. Чтобы при наведении мышкой на блок меню, выкатывались другие элементы. Например "каталог-телефоны,планшеты, и т.д. Если возможно, расскажите как это реализовать.
Данная реализация выпадающего меню:
http://ruseller.com/...p?rub=2&id=1641

#3 Alvel007

Alvel007

    Пользователь

  • Пользователи
  • PipPip
  • 43 сообщений

Отправлено 04 Март 2013 - 08:18

Да, спасибо. Всё здорово, только вот такая проблема: не работают ссылки из этой шапки. Если навожу на шапку и нажимаю правую кнопку мыши "открыть в новой вкладке", то перехожу по ссылке, а просто кликание по самой шапке не дают никакого результата.
Например вот так:


<html lang="ru-RU">
<head>
  <title>Горизонтальная навигационная панель</title>
  <link rel="stylesheet" type="text/css" media="all" href="styles.css">
  <script type="text/javascript" src="https://ajax.googlea...n.js"></script>
</head>

<body>
  <div id="w">
    <nav>
      <ul id="ddmenu">
        <li><a href="http://sotik-city.ru...лавная</a></li>
        <li><a href="#">Каталог</a>
          <ul>
            <li><a href="http://sotik-city.ru...лефоны</a></li>
            <li><a href="http://sotik-city.ru...аншеты</a></li>
            <li><a href="http://sotik-city.ru...с-лист</a></li>
          </ul>
        </li>
        <li><a href="#">Информация</a>
          <ul>
            <li><a href="http://sotik-city.ru...рантия">Правила покупки</a></li>
            <li><a href="http://sotik-city.ru...ставка</a></li>
            <li><a href="#">Оплата</a></li>
            <li><a href="#">Гарантия</a></li>
          </ul>
        </li>
        <li><a href="http://sotik-city.ru...орзина</a></li>
        <li><a href="http://sotik-city.ru...u/page/О-нас">О нас</a></li>
        <li><a href="http://sotik-city.ru...нтакты</a></li>
      </ul>
    </nav>
  </div>
<script type="text/javascript">
$(document).ready(function(){
  $('a').on('click', function(e){
    e.preventDefault();
  });

  $('#ddmenu li').hover(function () {
     clearTimeout($.data(this,'timer'));
     $('ul',this).stop(true,true).slideDown(200);
  }, function () {
    $.data(this,'timer', setTimeout($.proxy(function() {
      $('ul',this).stop(true,true).slideUp(200);
    }, this), 100));
  });

});
</script>
</body>
</html>

#4 support 2.0

support 2.0

    Активный участник

  • Модераторы
  • 4 950 сообщений

Отправлено 04 Март 2013 - 14:33

Просмотр сообщенияAlvel007 (04 Март 2013 - 08:18) писал:

Да, спасибо. Всё здорово, только вот такая проблема: не работают ссылки из этой шапки. Если навожу на шапку и нажимаю правую кнопку мыши "открыть в новой вкладке", то перехожу по ссылке, а просто кликание по самой шапке не дают никакого результата.
Например вот так:


<html lang="ru-RU">
<head>
  <title>Горизонтальная навигационная панель</title>
  <link rel="stylesheet" type="text/css" media="all" href="styles.css">
  <script type="text/javascript" src="https://ajax.googlea...n.js"></script>
</head>

<body>
  <div id="w">
<nav>
  <ul id="ddmenu">
<li><a href="http://sotik-city.ru...лавная</a></li>
<li><a href="#">Каталог</a>
  <ul>
<li><a href="http://sotik-city.ru...лефоны</a></li>
<li><a href="http://sotik-city.ru...аншеты</a></li>
<li><a href="http://sotik-city.ru...с-лист</a></li>
  </ul>
</li>
<li><a href="#">Информация</a>
  <ul>
<li><a href="http://sotik-city.ru...рантия">Правила покупки</a></li>
<li><a href="http://sotik-city.ru...ставка</a></li>
<li><a href="#">Оплата</a></li>
<li><a href="#">Гарантия</a></li>
  </ul>
</li>
<li><a href="http://sotik-city.ru...орзина</a></li>
<li><a href="http://sotik-city.ru...u/page/О-нас">О нас</a></li>
<li><a href="http://sotik-city.ru...нтакты</a></li>
  </ul>
</nav>
  </div>
<script type="text/javascript">
$(document).ready(function(){
  $('a').on('click', function(e){
e.preventDefault();
  });

  $('#ddmenu li').hover(function () {
clearTimeout($.data(this,'timer'));
$('ul',this).stop(true,true).slideDown(200);
  }, function () {
$.data(this,'timer', setTimeout($.proxy(function() {
  $('ul',this).stop(true,true).slideUp(200);
}, this), 100));
  });

});
</script>
</body>
</html>


возможно, потому, что у Вас много ошибок в ссылках, например
[color=#282828][font=helvetica, arial, sans-serif]<li>[/font][/color]<a href="http://sotik-city.ru/cart</a></li>

а нужно
<li><a href="http://sotik-city.ru/cart"</a></li>
таким образом ссылки к страницам должны быть заключены в кавычках

также вместо # прописывать адрес к страницам

#5 Alvel007

Alvel007

    Пользователь

  • Пользователи
  • PipPip
  • 43 сообщений

Отправлено 04 Март 2013 - 14:40

Просмотр сообщенияsupport 2.0 (04 Март 2013 - 14:33) писал:

возможно, потому, что у Вас много ошибок в ссылках, например
[color=#282828][font=helvetica, arial, sans-serif]<li>[/font][/color]<a href="http://sotik-city.ru/cart</a></li>

а нужно
<li><a href="http://sotik-city.ru/cart"</a></li>
таким образом ссылки к страницам должны быть заключены в кавычках

также вместо # прописывать адрес к страницам
Что то странно код скопировался в предыдущем сообщении.
Я так и прописываю ссылки
<li><a href="http://sotik-city.ru.../a>Корзина</li>.
Вот файл

Прикрепленные файлы

  • Прикрепленный файл  Test.html   2,12К   139 Количество загрузок:

#6 support 2.0

support 2.0

    Активный участник

  • Модераторы
  • 4 950 сообщений

Отправлено 04 Март 2013 - 16:55

Просмотр сообщенияAlvel007 (04 Март 2013 - 14:40) писал:

Что то странно код скопировался в предыдущем сообщении.
Я так и прописываю ссылки
<li><a href="http://sotik-city.ru.../a>Корзина</li>.
Вот файл

сейчас эта строчка у вас немного неправильная, я забыла поставить одну скобку. Исправьте ее на
<li><a href="http://sotik-city.ru/cart"></a>Корзина</li>

Что касается самого меню, то там у Вас во-первых файл стилей не подключен style.css. Вы его подключаете с компьютера, естественно он не подключится. Его сначала нужно загрузить в раздел Сайт -> редактор тем -> добавить файл. Далее после строчки
<!-- Стили магазина -->
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}main.css" type="text/css" />

вставьте
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}styles.css" type="text/css" />

А так в обще-то все ссылки в главном меню открываются по своему адресу

#7 Alvel007

Alvel007

    Пользователь

  • Пользователи
  • PipPip
  • 43 сообщений

Отправлено 04 Март 2013 - 21:24

Столкнулся с небольшими проблемами.
1) начал что то глючить банер, на котором статические картинки меняются периодически. (см.рис.)
2) почему то изменился шрифт на многих текстах сайта. Например надпись контактов и времени работы в шапке сайта.
3) Подскажите ещё напоследок , куда мне вставить скрипт. Что то все мои вариации не дали никакого результат - сайт выдает ошибку. Менюшки, соответственно, не выпрыгивают... (

Прикрепленные изображения

  • Image 5.png

#8 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 04 Март 2013 - 23:18

1) Найдите в файле стилей nyvo.css

.nivo-main-image {
	display: block !important;
	position: relative !important;
	width: 100% !important;
}

2) Изменить шрифт контактов вы можете в файле стилей main.css а именно в классе

#contactInfo {
	font-size: 1.1em;
	left: 170px;
	position: absolute;
	top: 10px;
}

задав необходимые стили шрифта.

3) Пожалуйста, сообщите о каком скрипте идет речь?
и замените на

.nivo-main-image {
	display: block !important;
	position: relative !important;
	width: 100% !important;
	z-index: 10;
}

#9 Alvel007

Alvel007

    Пользователь

  • Пользователи
  • PipPip
  • 43 сообщений

Отправлено 04 Март 2013 - 23:25

Просмотр сообщенияVaccina (04 Март 2013 - 23:18) писал:

3) Пожалуйста, сообщите о каком скрипте идет речь?
и замените на

.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
z-index: 10;
}

Вот этот скрипт:

<script type="text/javascript">
$(document).ready(function(){
  $('a').on('click', function(e){
e.preventDefault();
  });

  $('#ddmenu li').hover(function () {
clearTimeout($.data(this,'timer'));
$('ul',this).stop(true,true).slideDown(200);
  }, function () {
$.data(this,'timer', setTimeout($.proxy(function() {
  $('ul',this).stop(true,true).slideUp(200);
}, this), 100));
  });

});
</script>
Я так понимаю, он необходим для того, чтобы при наведении мышкой на блок навигации выкатывались необходимые элементы меню. Куда его нужно вставить?

Кстати, после проделывания первой манипуляции, из слайда исчезла вся анимация... (( И стрелки для ручной смены каритнки.

#10 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 05 Март 2013 - 06:59

Просмотр сообщенияAlvel007 (04 Март 2013 - 23:25) писал:

Вот этот скрипт:

<script type="text/javascript">
$(document).ready(function(){
  $('a').on('click', function(e){
e.preventDefault();
  });

  $('#ddmenu li').hover(function () {
clearTimeout($.data(this,'timer'));
$('ul',this).stop(true,true).slideDown(200);
  }, function () {
$.data(this,'timer', setTimeout($.proxy(function() {
  $('ul',this).stop(true,true).slideUp(200);
}, this), 100));
  });

});
</script>
Я так понимаю, он необходим для того, чтобы при наведении мышкой на блок навигации выкатывались необходимые элементы меню. Куда его нужно вставить?

Кстати, после проделывания первой манипуляции, из слайда исчезла вся анимация... (( И стрелки для ручной смены каритнки.

Этот код вы можете вставить в шаблон HTML перед тегом </head>

#11 Alvel007

Alvel007

    Пользователь

  • Пользователи
  • PipPip
  • 43 сообщений

Отправлено 05 Март 2013 - 10:28

Просмотр сообщенияmiyako (05 Март 2013 - 06:59) писал:

Этот код вы можете вставить в шаблон HTML перед тегом </head>
Вставил, как вы посоветовали. Что то не сработало... Не работает, и при загрузке сайта вылетает ошибка. В итоге вот так получилось. Как от этого избавиться?

Прикрепленные файлы

  • Прикрепленный файл  HTML.doc   98К   249 Количество загрузок:

#12 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 05 Март 2013 - 12:43

Просмотр сообщенияAlvel007 (05 Март 2013 - 10:28) писал:

Вставил, как вы посоветовали. Что то не сработало... Не работает, и при загрузке сайта вылетает ошибка. В итоге вот так получилось. Как от этого избавиться?

Какая у вас вылезает ошибка?
Прикрепите пожалуйста к сообщению скриншот.

Сейчас у вас на сайте только одна ошибка - не загружено изображение bg.png
Вы наверное откатили изменения назад?

Код вы вставили правильно, не могли бы указать источник, то есть откуда вы взяли этот код(ссылку на сообщение или тему)?

#13 Alvel007

Alvel007

    Пользователь

  • Пользователи
  • PipPip
  • 43 сообщений

Отправлено 05 Март 2013 - 12:52

Просмотр сообщенияmiyako (05 Март 2013 - 12:43) писал:

Какая у вас вылезает ошибка?
Прикрепите пожалуйста к сообщению скриншот.

Сейчас у вас на сайте только одна ошибка - не загружено изображение bg.png
Вы наверное откатили изменения назад?

Код вы вставили правильно, не могли бы указать источник, то есть откуда вы взяли этот код(ссылку на сообщение или тему)?

Скриншет ошибки ниже. Там как раз про ява-скрипт написано.
Ну а сам скрипт я взял, как  мне  выше посоветовали, отсюда http://ruseller.com/...p?rub=2&id=1641
Да ошибку я откатил, но сейчас вот снова скрипт вставил, чтобы вы могли посмотреть при необходимости.

Прикрепленные изображения

  • Image 6.png

#14 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 05 Март 2013 - 13:09

Просмотр сообщенияAlvel007 (05 Март 2013 - 12:52) писал:

Скриншет ошибки ниже. Там как раз про ява-скрипт написано.
Ну а сам скрипт я взял, как  мне  выше посоветовали, отсюда http://ruseller.com/...p?rub=2&id=1641
Да ошибку я откатил, но сейчас вот снова скрипт вставил, чтобы вы могли посмотреть при необходимости.

Кроме скрипта вам нужно вставить стили и добавить к коду шаблона HTML классы, указанные здесь - http://ruseller.com/...p?rub=2&id=1641

#15 support 2.0

support 2.0

    Активный участник

  • Модераторы
  • 4 950 сообщений

Отправлено 05 Март 2013 - 13:15

Просмотр сообщенияAlvel007 (05 Март 2013 - 12:52) писал:

Скриншет ошибки ниже. Там как раз про ява-скрипт написано.
Ну а сам скрипт я взял, как  мне  выше посоветовали, отсюда http://ruseller.com/...p?rub=2&id=1641
Да ошибку я откатил, но сейчас вот снова скрипт вставил, чтобы вы могли посмотреть при необходимости.

Сейчас на Вашем сайте нет такое ошибки

#16 Alvel007

Alvel007

    Пользователь

  • Пользователи
  • PipPip
  • 43 сообщений

Отправлено 18 Март 2013 - 21:59

У меня появилось немного времени и я решил продолжить разбираться с этим вопросом. Снова проблемы... ((
Ну во первых почему то перестает работать слайдер на главной странице.
Во вторых, почему то искажаются шрифты в блоках, которые выпрыгивают при наведении курсора.
Ну и третье - 2 ява ошибки. Скрин ниже.

С остальными проблемами я разберусь. ) и расположения поставлю как нужно и всё остальное. Пока на ночь не буду убирать эти глюки, чтобы ы вас была возможность посмотреть http://sotik-city.ru/

Помогите, пожалуйста, решить эти проблемы.

Прикрепленные изображения

  • 123.jpg

#17 mikola

mikola

    Good soo good

  • Модератоpы
  • 1 550 сообщений
  • Городгород Нижний Новгород

Отправлено 18 Март 2013 - 22:10

Просмотр сообщенияAlvel007 (18 Март 2013 - 21:59) писал:

У меня появилось немного времени и я решил продолжить разбираться с этим вопросом. Снова проблемы... ((
Ну во первых почему то перестает работать слайдер на главной странице.
Во вторых, почему то искажаются шрифты в блоках, которые выпрыгивают при наведении курсора.
Ну и третье - 2 ява ошибки. Скрин ниже.

С остальными проблемами я разберусь. ) и расположения поставлю как нужно и всё остальное. Пока на ночь не буду убирать эти глюки, чтобы ы вас была возможность посмотреть http://sotik-city.ru/

Помогите, пожалуйста, решить эти проблемы.
первое где именно располагался  ваш слайдер??
второе...Чистим кэш браузера ..проверил ваш сайт в разных браузерах отображение нормальное

#18 Alvel007

Alvel007

    Пользователь

  • Пользователи
  • PipPip
  • 43 сообщений

Отправлено 18 Март 2013 - 22:15

Слайдер должен быть под надписью приветствия.
После вставки скрипта
<script type="text/javascript" src="https://ajax.googlea...n.js"></script>
слайдер работать перестает.
Да, кеш почистил, начало нормально отображаться, вот только перейти не по одному из пунктов не могу...

#19 Alvel007

Alvel007

    Пользователь

  • Пользователи
  • PipPip
  • 43 сообщений

Отправлено 18 Март 2013 - 22:33

Да слайдер то работает без вставленного скипта. Всё с ним в порядке. А вот когда вставляю в хтмл
<script type="text/javascript" src="https://ajax.googlea...n.js"></script>
перестает работать слайдер. Да и вообще ни по одной ссылке перейти не могу. Вы когда смотрели сайт, у вас получилось хоть куда нибудь с главной страницы перейти?

#20 mikola

mikola

    Good soo good

  • Модератоpы
  • 1 550 сообщений
  • Городгород Нижний Новгород

Отправлено 18 Март 2013 - 22:36

Просмотр сообщенияAlvel007 (18 Март 2013 - 22:33) писал:

Да слайдер то работает без вставленного скипта. Всё с ним в порядке. А вот когда вставляю в хтмл
<script type="text/javascript" src="https://ajax.googlea...n.js"></script>
перестает работать слайдер. Да и вообще ни по одной ссылке перейти не могу. Вы когда смотрели сайт, у вас получилось хоть куда нибудь с главной страницы перейти?
давайте ещё раз попробуем...сделаем вид который был изначально.
Обратно в Шаблон Сияние


Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Сияние
  5. Privacy Policy