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

Статус
В этой теме нельзя размещать новые ответы.

rusdin

Постоялец
Регистрация
7 Фев 2013
Сообщения
61
Реакции
47
Всем привет интересует данное решения для Joomla Для просмотра ссылки Войди или Зарегистрируйся
Взял за основу maximenu ck понимаю что возможно добиться такого эффекта и не получиться но все же может попробуем решить как нить Пробую работать с CSS именно opacity и onmouseover! Возможно кто то знает решение или готовый модуль готов приобрести если направите.
 
й вариант использовать стандартное меню шаблона, в файле шаблона 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>


и дело за стилями остается.
и смотри чтобы правильно указано расположение скрипта было
 
вот вариант проще, но тут самому вечно названия и ссылки меню указывать
взять Для просмотра ссылки Войди или Зарегистрируйся
закинть файлы tympanus в joomla
в модуль вставить данные с файла index.html, поставить свои ссылки и названия
и вывести модуь
 
вот вариант проще, но тут самому вечно названия и ссылки меню указывать
взять Для просмотра ссылки Войди или Зарегистрируйся
закинть файлы 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]
 
Сделай так, в папке 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>
 
Сделай так, в папке 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>
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху