Jump to content
Sign in to follow this  
Dizzy

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

Recommended Posts

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

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

http://www.red.ua

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

Share this post


Link to post
Share on other sites
position: fixed;

Share this post


Link to post
Share on other sites

position: fixed;

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

  • +1 1

Share this post


Link to post
Share on other sites

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

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

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

Share this post


Link to post
Share on other sites

Добавил в 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>

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

 

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

 

 

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

Share this post


Link to post
Share on other sites
В 09.02.2013 в 15:26, snastik сказав:

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

Edited by AleksandrEvroteh

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Similar Content

    • By 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  
    • By zomo
      Добрый день форумчане, необходимо реализовать следующий функционал..
       
      Есть сайт с любимым шаблоном Coloring, есть стандартное bootstrap меню, которое кстати очень нравится, но есть одно но, нет возможности вносить кастомные ссылки во 2ой и 3 тий уровень вложенности.
       
      необходимо реализовать модуль меню, на основе технологии Drag and Drop для вставки абсолютно произвольных ссылок до 3го уровня.
       
      Все меню должно быть реализовано через модуль, не зависимо от категорий...
       
      При этом важно на фрондэнде не видоизменять меню, то есть внедрить модуль в стили стандартного bootstrap как сейчас, поменять исключительное содержания кода для вывода произвольных ссылок
       
       
      Пример реализации Drag and Drop меню ВОТ (Не реклама для наглядности)
       
      Вопрос в цене и сроках, спасибо заранее за прочтение поста.
    • By 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
    • By 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. Ну и меню заключила в дополнительный видимый блок.
       
      Что не так, подскажите, пожалуйста!!! Даже не знаю где смотреть....
  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.