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

Дополнительное меню с фиксацией при прокрутке

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

Подскажите есть ли такой модуль чтобы можно было реализовать вверху свое дополнительное меню и зафиксировать его чтобы при прокрутке сайта вниз меню не уезжало вверх за края броузера.

На примере вот такого сайта

http://www.red.ua

То-есть чтобы можно было задавать пункты на страницы как на обычном сайте.

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


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

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


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

position: fixed;

А само меню? Меня интересует именно чтобы можно было как в футере задавать пункты и привязывать к ним страницы.

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


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

Ну это инструментами CSS делается, как бы готового меню не видел, но знаю точно, что оно есть...

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


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

Это к Лебедеву, вопросы как у яндекса меню сделано %)

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


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

Интересно ни как конкретно на яндексе, а как достичь такого же эффекта. К примеру, возможно существует уже готовый скрипт на jquery, который можно настроить под себя?

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


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

тому меню которое в примере никакой скрипт не нужен

вы конкретизируйте что должно быть в этом меню ?

как часто это меню будет менятся

и тогда будут варианты ответа и как у лебедева и как не у лебедева :-)

на одном из моих сайтов я делаю вот так http://motosila.com.ua/ но есть у него некоторые проблемы с загрузкой на медленном интернете

  • +1 1

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


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

тому меню которое в примере никакой скрипт не нужен

вы конкретизируйте что должно быть в этом меню ?

как часто это меню будет менятся

и тогда будут варианты ответа и как у лебедева и как не у лебедева :-)

на одном из моих сайтов я делаю вот так http://motosila.com.ua/ но есть у него некоторые проблемы с загрузкой на медленном интернете

Подскажите, пожалуйста, как реализовать Ваш вариант? Спасибо! Красиво!

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


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

Подскажите, пожалуйста, как реализовать Ваш вариант? Спасибо! Красиво!

вот почитайте http://awesome-design.com/stati/javascript/fiksirovannoe-vertikalnoe-menyu.html

  • +1 1

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


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

красиво получилось :-)

))) Спасибо :eek: !!! Сейчас смотрю за поведением посетителей. Вроде среднее количество просмотров страниц выросло и отскок меньше стал)) Еще пару деньков потестим!)

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


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

bikoff, эмм... что могу сказать... настоятельно рекомендую этот модуль...

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


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

bikoff, эмм... что могу сказать... настоятельно рекомендую этот модуль...

Вы очень кстати!!! Я давно его искал!!!! Спасибо!!!!! Ну, прет так прет!!! На одной ветке двух зайцев!!!) icon_e_surprised.gif

Еще хотел спросить: А как Вы думаете оно не будет влиять на ПС? Ну будут боты попадать на главную страницу? Спасибо!

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


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

а чего ему станется-то? бот - не браузер. у него javascript не сработает.

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


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

а чего ему станется-то? бот - не браузер. у него javascript не сработает.

Тогда буду пробовать. Странно, на украинских секс-шопах нет таких предупреждений. Хотя на сайте они указывают.

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


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

snastik, добрый день.

Спасибо за ссылку, почитал, но поскольку знаний и опыта совсем чуть-чуть, а красивый сайт хочется, подскажите, куда вставлять html-код? Правильно ли понимаю, что надо в header.tpl в <div id=menu>? Не сочтите за труд, просветите неумеху.

Ну или кто-то другой, кому не лень.

Заранее спасибо.

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


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

Добавил в CSS 

positionfixed

 

Появилась проблема. Меню остается на том самом месте, на котором он зафикисрованно, т.е. под шапкой. При скролле шапка езжает вверх, а меню так и сотается на месте и не прилипает к верхней части окна.

Помогите куда копать дальше? Надо добавлять JavaScript для обработки положения меню на странице или лучше добавить jQuery код.

 

Нашел вот такой вариант http://webcomplex.com.ua/jquery/delaem-fiksirovannoe-menyu-pri-prokrutke-stranicy.html#comments

Или так будет лучше http://awesome-design.com/stati/javascript/fiksirovannoe-gorizontalnoe-menyu.html

 

Помогите советом, как лучше реализовать. Или вообще можно обойтись только средствами CSS?

 

Куда надо добавлять код?

 

01 $(document).ready(function(){
02  
03         var $menu = $("#menu");
04  
05         $(window).scroll(function(){
06             if ( $(this).scrollTop() > 100 && $menu.hasClass("default") ){
07                 $menu.removeClass("default").addClass("fixed");
08             } else if($(this).scrollTop() <= 100 && $menu.hasClass("fixed")) {
09                 $menu.removeClass("fixed").addClass("default");
10             }
11         });//scroll
12     });

 

 

UPD: проблема решена. Код вставил в header.tpl  в тег <head>...</head>

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


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

jQuery - тот же javascript. учите матчасть.

кроме css для фиксированного блока ничего не надо.

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


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

jQuery - тот же javascript. учите матчасть.

кроме css для фиксированного блока ничего не надо.

 

Если Вы о position:fixed то, он фиксирует элемент, в этом Вы правы, но это не то, что мне нужно. Это только часть решения задачи.

 

 

Матчасть учу, но в основном методом научного тыка, т.к. времени на глубокой изучение просто нет. Сайт делаю для жены. А основная работа никак не связана ни с программированием, ни с веб-дизайном. Так что, извините, если неправильно выразился. Я знаю, что я малограмотный в данной области. Именно поэтому и задаю вопросы.

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


Ссылка на сообщение
Поделиться на другие сайты
В 09.02.2013 в 15:26, snastik сказав:

Офигеннная статья. Я сделал поиск файлов css, результат - 125 файлов. Какой из них? Шаблон стандартный с офсайта версия 2.3...

Изменено пользователем AleksandrEvroteh

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


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

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

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

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

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

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

Войти

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

Войти

  • Похожий контент

    • От serega-lomik
      Скачать/Купить дополнение


      Custom Menu - настраиваемое меню с произвольными ссылками
      Модуль позволяет создавать свои собственные блоки меню с произвольным заголовком и набором ссылок, вложенностью ссылок до третьего уровня, заданием иконок для ссылок первого и второго уровней, поддерживается мультиязычность.
      Модуль подойдёт тем, кому необходимо создать собственное меню категорий, меню со ссылками на нужные новости, статьи, товары, да на всё, что угодно. Все параметры настраиваются из админ части магазина.
      Основные возможности модуля:
      Практически неограниченное количество пунктов меню (ссылок)
      Все пункты меню создаются вручную, задается имя пункта, указывается ссылка, и прочее
      Модуль поддерживает мультиязычность
      Возможна вложенность пунктов меню до 3го уровня
      Пунктам меню первого и второго уровней можно присвоить картинку - иконку
      Присутствует возможность отображения пунктов меню второго уровня в несколько колонок
      Можно одновременно создавать несколько модулей меню и для каждого выбрать, на каких схемах его показывать
      Отдельно каждому модулю можно задать
      -- индивидуальный заголовок
      -- какие стили оформления использовать - собственные или шаблона
      -- какие пункты меню показывать в этом модуле
      -- на каких схемах и в каком месте его показывать и т.д.
      Устанавливается как обычный модуль
      Не требует vQmod

      Тестировалось на OcStore версий с 1.5.3.1 по 1.5.5.1.2 и OpenCart с 1.5.4.1 по 1.5.6.4
      Админка модуля


      Пример отображения модуля на витрине


      Демо: http://1.live-drive.ru/desktops/
      Демо админки: http://1.live-drive.ru/admin/index.php?route=module/custom_menu demo/demo
      Добавил serega-lomik Добавлено 31.03.2015 Категория Модули Системные требования Сайт разработчика Старая цена Метод активации Ioncube Loader OpenCart ocStore OpenCart.Pro, ocShop  
    • От zomo
      Добрый день форумчане, необходимо реализовать следующий функционал..
       
      Есть сайт с любимым шаблоном Coloring, есть стандартное bootstrap меню, которое кстати очень нравится, но есть одно но, нет возможности вносить кастомные ссылки во 2ой и 3 тий уровень вложенности.
       
      необходимо реализовать модуль меню, на основе технологии Drag and Drop для вставки абсолютно произвольных ссылок до 3го уровня.
       
      Все меню должно быть реализовано через модуль, не зависимо от категорий...
       
      При этом важно на фрондэнде не видоизменять меню, то есть внедрить модуль в стили стандартного bootstrap как сейчас, поменять исключительное содержания кода для вывода произвольных ссылок
       
       
      Пример реализации Drag and Drop меню ВОТ (Не реклама для наглядности)
       
      Вопрос в цене и сроках, спасибо заранее за прочтение поста.
    • От serega-lomik
      Модуль позволяет создавать свои собственные блоки меню с произвольным заголовком и набором ссылок, вложенностью ссылок до третьего уровня, заданием иконок для ссылок первого и второго уровней, поддерживается мультиязычность.
      Модуль подойдёт тем, кому необходимо создать собственное меню категорий, меню со ссылками на нужные новости, статьи, товары, да на всё, что угодно. Все параметры настраиваются из админ части магазина.
      Основные возможности модуля:
      Практически неограниченное количество пунктов меню (ссылок)
      Все пункты меню создаются вручную, задается имя пункта, указывается ссылка, и прочее
      Модуль поддерживает мультиязычность
      Возможна вложенность пунктов меню до 3го уровня
      Пунктам меню первого и второго уровней можно присвоить картинку - иконку
      Присутствует возможность отображения пунктов меню второго уровня в несколько колонок
      Можно одновременно создавать несколько модулей меню и для каждого выбрать, на каких схемах его показывать
      Отдельно каждому модулю можно задать
      -- индивидуальный заголовок
      -- какие стили оформления использовать - собственные или шаблона
      -- какие пункты меню показывать в этом модуле
      -- на каких схемах и в каком месте его показывать и т.д.
      Устанавливается как обычный модуль
      Не требует vQmod

      Тестировалось на OcStore версий с 1.5.3.1 по 1.5.5.1.2 и OpenCart с 1.5.4.1 по 1.5.6.4
      Админка модуля


      Пример отображения модуля на витрине


      Демо: http://1.live-drive.ru/desktops/
      Демо админки: http://1.live-drive.ru/admin/index.php?route=module/custom_menu demo/demo
    • От Kateryna
      Добрый день!
      Подскажите, пожалуйста, почему фиксированное меню при скроллинге исчезает за банером, а подменю вообще не видно (только на главной странице, на остальных страницах все ОК).
      Данная проблема в  Хроме, Опере и ИЕ.
       
      Сайт: http://ecotrand.ru
      1. В библиотеку добавила это:
      $(document).ready(function() { var header_h = 160; // var menu = $('#menu'); menu.css({'position' : 'fixed', 'top' : header_h + 'px'}); $(window).scroll(function(){ var top = $(window).scrollTop(); if(top < header_h){ menu.css({'top': header_h - top +'px'}); } else { menu.css({'top': '0'}); } });}); 2. В header.tpl  вписала это:
      <script type="text/javascript" src="catalog/view/javascript/jquery/jquery.menu.js"></script>
       
      3. Ну и меню заключила в дополнительный видимый блок.
       
      Что не так, подскажите, пожалуйста!!! Даже не знаю где смотреть....
  • Последние посетители   0 пользователей онлайн

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

×

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

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