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

rusdin · 28 Фев 2013

Всем привет интересует данное решения для Joomla Для просмотра ссылки Войди или Зарегистрируйся
Взял за основу maximenu ck понимаю что возможно добиться такого эффекта и не получиться но все же может попробуем решить как нить Пробую работать с CSS именно opacity и onmouseover! Возможно кто то знает решение или готовый модуль готов приобрести если направите.

php-elvin · 28 Фев 2013

й вариант использовать стандартное меню шаблона, в файле шаблона 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>

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

php-elvin · 28 Фев 2013

вот вариант проще, но тут самому вечно названия и ссылки меню указывать
взять Для просмотра ссылки Войди или Зарегистрируйся
закинть файлы tympanus в joomla
в модуль вставить данные с файла index.html, поставить свои ссылки и названия
и вывести модуь

rusdin · 28 Фев 2013

php-elvin написал(а):
вот вариант проще, но тут самому вечно названия и ссылки меню указывать
взять Для просмотра ссылки Войди или Зарегистрируйся
закинть файлы tympanus в joomla
в модуль вставить данные с файла index.html, поставить свои ссылки и названия
и вывести модуь

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "Для просмотра ссылки Войди или Зарегистрируйся">
<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="Для просмотра ссылки Войди или Зарегистрируйся"></a>
<a class="dry" href="Для просмотра ссылки Войди или Зарегистрируйся">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>[/spoil]

Вот то что показывет
[spoil]

Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся

php-elvin · 28 Фев 2013

Сделай так, в папке media, создай папку menu и закинь туда файл style.css и файл jquery-1.3.2.js
в модуль положи

rusdin · 1 Мар 2013

php-elvin написал(а):
Сделай так, в папке 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>[/spoil]

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

Вот правильный код! Можно и в index.php вашего шаблона
[spoil]<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>

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

rusdin

Постоялец

php-elvin

Постоялец

php-elvin

Постоялец

rusdin

Постоялец

php-elvin

Постоялец

rusdin

Постоялец