Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.05.2015, 19:26
Интересующийся
Отправить личное сообщение для kostia170985 Посмотреть профиль Найти все сообщения от kostia170985
 
Регистрация: 29.04.2015
Сообщений: 11

меню как на сайте утконос
Здравствуйте!
Я хочу сделать меню как на http://www.utkonos.ru Каталог товаров
Большое спасибо огромное РОНИ за подсказки.
Вот что у меня получиилось
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
        <style type="text/css">
		 .menu{
			 border:1px dashed #000;
			 width: 100px;
            }
            .submenu{
                display: none;
				background:#FFF;
				position:absolute;
				left:0px;
				top:7px;
				padding-left:100px;
				border:2px solid #F00;
				z-index: 10;
            }
            .menu_block{
                cursor: pointer;
				background:#CCC;
            }
			.level-otk{ position: relative;
			z-index: 100;
				
				}
        </style>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script>
            $(document).ready(function () {
                $(".menu_block").mouseenter(function(){
                    var $elem = $(".submenu", this);
                    if ($elem.css('display') === 'none') {
                        $elem.stop(true).delay(700).fadeIn(600);
                    } else {
                        $elem.stop().animate({opacity:1}, 600);
                    }
                }).mouseleave(function(){
                    $(".submenu", this).stop(true).delay(300).fadeOut(600);
                });
            });
        </script>
    </head>
    <body>
    <div class="menu">
        <div  class="menu_block">
        <a class="level-otk" href="#">Меню1</a>
        <span  class="submenu">
          <li class="level-2">Меню1 Подменю1</li>
         <li class="level-2">Меню1 Подменю2</li>
          <li class="level-2">Меню1 Подменю3</li>
        </span></div>
         <div  class="menu_block">
        <a class="level-otk" href="#">Меню2</a>
        <span  class="submenu">
          <li class="level-2">Меню2 Подменю1</li>
         <li class="level-2">Меню2 Подменю2</li>
          <li class="level-2">Меню2 Подменю3</li>
        </span></div>
        <div  class="menu_block">
        <a class="level-otk" href="#">Меню3</a>
        <span  class="submenu">
          <li class="level-2">Меню3 Подменю1</li>
         <li class="level-2">Меню3 Подменю2</li>
          <li class="level-2">Меню3 Подменю3</li>
        </span></div></div>
    </body>
</html>

Само меню плавно появляется.Именно то что и хотел.
Но вот когда переходишь к другой вкладке меню оно тоже медленно меняется, а на сайте быстрая смена .
Подскажите как это организовать?
Ответить с цитированием
  #2 (permalink)  
Старый 12.05.2015, 19:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,076

kostia170985,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
        <style type="text/css">
		 .menu{
			 border:1px dashed #000;
			 width: 100px;
            }
            .submenu{
                display: none;
				background:#FFF;
				position:absolute;
				left:0px;
				top:7px;
				padding-left:100px;
				border:2px solid #F00;
				z-index: 10;
            }
            .menu_block{
                cursor: pointer;
				background:#CCC;
            }
			.level-otk{ position: relative;
			z-index: 100;

				}
        </style>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script>
            $(document).ready(function () {
                var time = 700;
                $(".menu").on("mouseenter mouseleave", function(event){time = 700;})
                $(".menu_block").mouseenter(function(){
                    var $elem = $(".submenu", this);
                    if ($elem.css('display') === 'none') {
                        $elem.stop(true).delay(time).fadeIn(600);
                    } else {
                        $elem.stop().animate({opacity:1}, 600);
                    }
                    time = 100;
                }).mouseleave(function(){
                    $(".submenu", this).stop(true).delay(300).fadeOut(600);
                });
            });
        </script>
    </head>
    <body>
    <div class="menu">
        <div  class="menu_block">
        <a class="level-otk" href="#">Меню1</a>
        <span  class="submenu">
          <li class="level-2">Меню1 Подменю1</li>
         <li class="level-2">Меню1 Подменю2</li>
          <li class="level-2">Меню1 Подменю3</li>
        </span></div>
         <div  class="menu_block">
        <a class="level-otk" href="#">Меню2</a>
        <span  class="submenu">
          <li class="level-2">Меню2 Подменю1</li>
         <li class="level-2">Меню2 Подменю2</li>
          <li class="level-2">Меню2 Подменю3</li>
        </span></div>
        <div  class="menu_block">
        <a class="level-otk" href="#">Меню3</a>
        <span  class="submenu">
          <li class="level-2">Меню3 Подменю1</li>
         <li class="level-2">Меню3 Подменю2</li>
          <li class="level-2">Меню3 Подменю3</li>
        </span></div></div>
    </body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 12.05.2015, 20:07
Интересующийся
Отправить личное сообщение для kostia170985 Посмотреть профиль Найти все сообщения от kostia170985
 
Регистрация: 29.04.2015
Сообщений: 11

Огромное спасибо РОНИ
Ответить с цитированием
  #4 (permalink)  
Старый 13.05.2015, 00:38
Аспирант
Отправить личное сообщение для kichSman Посмотреть профиль Найти все сообщения от kichSman
 
Регистрация: 16.10.2009
Сообщений: 69

Эй, обидно, да!

Я делал события этого меню на стилях для большей браузерной нативности, а тут взяли... И все его события вульгарно на скриптах реализовали, еще и на jQuery (((

Боль, печаль...
Ответить с цитированием
  #5 (permalink)  
Старый 13.05.2015, 12:32
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

Можно на CSS же сделать.
Ответить с цитированием
  #6 (permalink)  
Старый 13.05.2015, 14:37
Аспирант
Отправить личное сообщение для kichSman Посмотреть профиль Найти все сообщения от kichSman
 
Регистрация: 16.10.2009
Сообщений: 69

Ruslan_xDD,
Так я на Утконосе так и сделал, а тут скриптами... jQuery...
Ответить с цитированием
  #7 (permalink)  
Старый 15.05.2015, 15:27
Интересующийся
Отправить личное сообщение для kostia170985 Посмотреть профиль Найти все сообщения от kostia170985
 
Регистрация: 29.04.2015
Сообщений: 11

Сообщение от kichSman Посмотреть сообщение
Эй, обидно, да!

Я делал события этого меню на стилях для большей браузерной нативности, а тут взяли... И все его события вульгарно на скриптах реализовали, еще и на jQuery (((

Боль, печаль...
Для браузерной нативности, на утконосе стоит "У вас стоит старый браузер обновите его"

А вот про стили подсказка отличная.Большое всем спасибо.
Рони вдвойне за быстроту и отзывчивость!
Ответить с цитированием
  #8 (permalink)  
Старый 15.05.2015, 22:54
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

Капец система, ну то есть привыкнуть наверно можно, но по-первости очень пугает, когда внезапно страница хренакс и вся исчезает, а на ее месте конвульсивно появляется какой-то мелкий текст с отстойной версткой.

В принципе для роботов наверно потянет, хотя говорят они давно умеют понимать что текст не виден, даже если он есть в хтмле. Но для людей такое нельзя делать.

Не надо ныть - я дизайнер и могу все объяснять, но только вы же не будете слушать. Ну хотя бы это послушайте: нельзя чтобы на экране одновременно в двух местах на расстоянии, особенно по горизонтали, появлялись или исчезали контрастные элементы. Как это и сделано - когда слева внезапно рисуется жирная зеленая рамка, а справа вместо аляпистого контента появляется убитая верстка на пустом листе.

Не делайте так, как себе бы не сделали.

Последний раз редактировалось kostyanet, 15.05.2015 в 22:58.
Ответить с цитированием
  #9 (permalink)  
Старый 16.05.2015, 04:48
Профессор
Отправить личное сообщение для kostyanet Посмотреть профиль Найти все сообщения от kostyanet
 
Регистрация: 23.10.2010
Сообщений: 2,718

От животной природы у человека скорость регистрации движения боковым зрением в 14 раз выше чем центральным, которым мы распознаем образы, буквы, цифры, и поэтому оно тормознее. Так вот когда что-то мелькает сбоку, оно неизбежно заставляет скосить глаза - так действуют рекламщики со своей дебильной анимацией. Но если одновременно мелькнет с одного боку и на хорошем расстоянии с другого - вы получите природный разрыв шаблона и накажете юзера через этот природный инстинкт.
Ответить с цитированием
  #10 (permalink)  
Старый 16.05.2015, 15:38
Аспирант
Отправить личное сообщение для kichSman Посмотреть профиль Найти все сообщения от kichSman
 
Регистрация: 16.10.2009
Сообщений: 69

kostyanet, веткой ошиблись?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать умную прокрутку на сайте? armidow Элементы интерфейса 0 20.04.2014 03:45
Как сделать своё онлайн радио на сайте? Gvozdb Библиотеки/Тулкиты/Фреймворки 0 17.05.2013 08:27
Как сделать что бы при регистрации человека на моем сайте у него не появлялось... drunkwolfs Общие вопросы Javascript 2 07.08.2012 10:58
Аккордеон меню, как доработать код. Gawk Общие вопросы Javascript 1 23.07.2012 13:01
Как переделать простое меню для сайта на javascript? denspb Работа 2 16.07.2010 01:25