1. Уважаемые пользователи, прежде чем ответить в теме или создать новую,
    внимательно ознакомьтесь с правилами раздела

    Кому лень работать или руки не оттуда - пользуйтесь услугами специалистов
  2. Не задавайте глупых вопросов "Посоветуйте какой-нибудь компонент.."

    Есть JED!!! Ищите там!!!

Помощь Исчезающая Панель навигации

Тема в разделе "Joomla", создана пользователем rusdin, 28 фев 2013.

Информация :
  • Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с правилами раздела
  • Не задавайте глупых вопросов "Посоветуйте какой-нибудь компонент.." Есть JED!!! Ищите там!!!
  • Аналоги ищите там же - на JED!!!
  • Новая версия? - У кого будет - тот выложит!
Статус темы:
Закрыта.
Модераторы: arman29, DMS, Genk0
  1. rusdin

    rusdin Постоялец

    Регистр.:
    7 фев 2013
    Сообщения:
    62
    Симпатии:
    44
    Всем привет интересует данное решения для Joomla http://tympanus.net/Tutorials/FixedFadeOutMenu/#top
    Взял за основу maximenu ck понимаю что возможно добиться такого эффекта и не получиться но все же может попробуем решить как нить Пробую работать с CSS именно opacity и onmouseover! Возможно кто то знает решение или готовый модуль готов приобрести если направите.
     
  2. php-elvin

    php-elvin Постоялец

    Регистр.:
    11 сен 2012
    Сообщения:
    111
    Симпатии:
    67
    й вариант использовать стандартное меню шаблона, в файле шаблона index.php после указания позиции менюхи вставить
    <script type="text/javascript" src="jquery-1.3.2.js"></script>
    <script type="text/javascript">
    $(function() {
    $(window).scroll(function(){
    var scrollTop = $(window).scrollTop();
    if(scrollTop != 0)
    $('#nav').stop().animate({'opacity':'0.2'},400);
    else
    $('#nav').stop().animate({'opacity':'1'},400);
    });

    $('#nav').hover(
    function (e) {
    var scrollTop = $(window).scrollTop();
    if(scrollTop != 0){
    $('#nav').stop().animate({'opacity':'1'},400);
    }
    },
    function (e) {
    var scrollTop = $(window).scrollTop();
    if(scrollTop != 0){
    $('#nav').stop().animate({'opacity':'0.2'},400);
    }
    }
    );
    });
    </script>


    и дело за стилями остается.
    и смотри чтобы правильно указано расположение скрипта было
     
  3. php-elvin

    php-elvin Постоялец

    Регистр.:
    11 сен 2012
    Сообщения:
    111
    Симпатии:
    67
    вот вариант проще, но тут самому вечно названия и ссылки меню указывать
    взять http://extensions.joomla.org/extens...ipts-integration/custom-code-in-modules/15251
    закинть файлы tympanus в joomla
    в модуль вставить данные с файла index.html, поставить свои ссылки и названия
    и вывести модуь
     
  4. rusdin

    rusdin Постоялец

    Регистр.:
    7 фев 2013
    Сообщения:
    62
    Симпатии:
    44
    Толи лыжи не те толи я....
    Можно подробнее! Куда закинуть файлы от меню (Кладу в папку шаблона) Меняю пути но выводится без стилей и прочего! Может что не так делаю
    Вод код которы в модуль

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>Beautiful Fixed Slide Out Navigation - Codrops</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" href="css/style.css" type="text/css" charset="utf-8"/>
    </head>
    <style>
    body{
    background:#fff url(desc.png) no-repeat top center;
    font-family:Arial;
    height:2000px;
    }
    .header
    {
    width:600px;
    height:56px;
    position:absolute;
    top:50%;
    left:10px;
    background:#fff url(title.png) no-repeat top left;
    }

    a.back{
    width:256px;
    height:73px;
    position:absolute;
    bottom:15px;
    right:15px;
    background:#fff url(codrops_back.png) no-repeat top left;
    }
    a.dry{
    position:absolute;
    bottom:15px;
    left:15px;
    text-align:left;
    font-size:12px;
    color:#ccc;
    text-transform:uppercase;
    text-decoration:none;
    }
    </style>
    <body>
    <div class="header"></div>
    <ul id="navigation">
    <li class="home"><a href=""><span>Home</span></a></li>
    <li class="about"><a href=""><span>About</span></a></li>
    <li class="search"><a href=""><span>Search</span></a></li>
    <li class="photos"><a href=""><span>Photos</span></a></li>
    <li class="rssfeed"><a href=""><span>Rss Feed</span></a></li>
    <li class="podcasts"><a href=""><span>Podcasts</span></a></li>
    <li class="contact"><a href=""><span>Contact</span></a></li>
    </ul>

    <div class="info">
    <a class="back" href="http://tympanus.net/codrops/2009/12/08/beautiful-slide-out-navigation-revised/"></a>
    <a class="dry" href="http://dryicons.com">Icons by DryIcons.com</a>
    </div>

    <script type="text/javascript" src="jquery-1.3.2.js"></script>
    <script type="text/javascript">
    $(function() {
    var d=300;
    $('#navigation a').each(function(){
    $(this).stop().animate({
    'marginTop':'-80px'
    },d+=150);
    });

    $('#navigation > li').hover(
    function () {
    $('a',$(this)).stop().animate({
    'marginTop':'-2px'
    },200);
    },
    function () {
    $('a',$(this)).stop().animate({
    'marginTop':'-80px'
    },200);
    }
    );
    });
    </script>
    </body>
    </html>


    Вот то что показывет
     
  5. php-elvin

    php-elvin Постоялец

    Регистр.:
    11 сен 2012
    Сообщения:
    111
    Симпатии:
    67
    Сделай так, в папке media, создай папку menu и закинь туда файл style.css и файл jquery-1.3.2.js
    в модуль положи
    <link rel="stylesheet" href="/media/menu/style.css" type="text/css" charset="utf-8"/>
    <ul id="navigation">
    <li class="home"><a href=""><span>Home</span></a></li>
    <li class="about"><a href=""><span>About</span></a></li>
    <li class="search"><a href=""><span>Search</span></a></li>
    <li class="photos"><a href=""><span>Photos</span></a></li>
    <li class="rssfeed"><a href=""><span>Rss Feed</span></a></li>
    <li class="podcasts"><a href=""><span>Podcasts</span></a></li>
    <li class="contact"><a href=""><span>Contact</span></a></li>
    </ul>

    <script type="text/javascript" src="/media/menu/jquery-1.3.2.js"></script>
    <script type="text/javascript">
    $(function() {
    var d=300;
    $('#navigation a').each(function(){
    $(this).stop().animate({
    'marginTop':'-80px'
    },d+=150);
    });

    $('#navigation > li').hover(
    function () {
    $('a',$(this)).stop().animate({
    'marginTop':'-2px'
    },200);
    },
    function () {
    $('a',$(this)).stop().animate({
    'marginTop':'-80px'
    },200);
    }
    );
    });
    </script>
     
    Игорь77 и rusdin нравится это.
  6. rusdin

    rusdin Постоялец

    Регистр.:
    7 фев 2013
    Сообщения:
    62
    Симпатии:
    44
    Данный способ работает но если есть virtuemart то идет конфликт.
    Много времени убил, много чего побывал в итоге решение нашлось ( С помощью добрых людей)

    Вот правильный код! Можно и в index.php вашего шаблона
    <link rel="stylesheet" href="/media/menu/style.css" type="text/css" charset="utf-8"/>
    <ul id="navigation">
    <li class="home"><a href=""><span>Меню1</span></a></li>
    <li class="about"><a href=""><span>Меню2</span></a></li>
    <li class="search"><a href=""><span>Меню3</span></a></li>
    <li class="photos"><a href=""><span>Меню4</span></a></li>

    <li class="podcasts"><a href=""><span>Меню5</span></a></li>
    <li class="contact"><a href=""><span>Меню6</span></a></li>
    </ul>
    <script type="text/javascript">
    jQuery(function($) {
    $(document).ready(function(){

    var d=300;
    $('#navigation a').each(function(){
    $(this).stop().animate({
    'marginTop':'-80px'
    },d+=150);
    });

    $('#navigation > li').hover(
    function () {
    $('a',$(this)).stop().animate({
    'marginTop':'-2px'
    },200);
    },
    function () {
    $('a',$(this)).stop().animate({
    'marginTop':'-80px'
    },200);
    }
    );
    });

    });
    </script>
     
Статус темы:
Закрыта.