X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Горизонтальное меню для форума с использованием HTML и jQuery
WebMage_hb
WebMage_hb
Topic Starter сообщение 7.8.2011, 10:32; Ответить: WebMage_hb
Сообщение #1


Здравствуйте!
Давно уже загорелся идеей сделать на своём форуме горизонтальное навигационное меню, но вот загвоздка в том что мои познания в написании либо редактировании скриптов и стилей очень скудны. Да и хостинг под мой форум не предоставляет доступа к базе т.е. приходится всё делать с помощью скриптов в админке, многое уже удалось сделать, улучшить функционал.
по одному из примеров начал ваять сам, но получилась только HTML часть скрипта.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body>
<div id="vnav">
<ul>
<li>
<h1><a href="http://alwow.ru/=&amp;pun-category1">World
of Warcraft</a></h1>
<p><a href="http://alwow.ru/viewforum.php?id=82">Гайды,
билды 3.3.5</a></p>
<p><a href="http://alwow.ru/viewforum.php?id=95">Гайды,
билды Катаклизм</a></p>
<p><a href="http://alwow.ru/viewforum.php?id=84">Сервера
3.3.5 - 4.2.0</a></p>
<p><a href="http://alwow.ru/viewforum.php?id=79">Наша
Таверна</a></p>
</li>
<li>
<h1><a href="http://alwow.ru/=&amp;pun-category2">Компьютерные
игры</a><br>
</h1>
<p><a href="http://alwow.ru/viewforum.php?id=96">Решение
проблем в играх</a></p>
<p><a href="http://alwow.ru/viewforum.php?id=86">Разные
игры</a></p>
</li>
<li>
<h1><a href="http://alwow.ru/=&amp;pun-category3">Графика
и дизайн</a></h1>
<p><a href="http://alwow.ru/viewforum.php?id=89">Графика</a></p>
<p><a href="http://alwow.ru/viewforum.php?id=92">Стол
заказов</a></p>
</li>
<li>
<h1><a href="http://alwow.ru/=&amp;pun-category4">Категория
IT</a></h1>
<p><a href="http://alwow.ru/viewforum.php?id=73">Настройка
Windows и прграмм</a></p>
<p><a href="http://alwow.ru/viewforum.php?id=90">Компьютерное
железо</a></p>
<p><a href="http://alwow.ru/viewforum.php?id=85">Веб-мастеринг,
Интернет</a></p>
</li>
<li>
<h1><a href="http://alwow.ru/=&amp;pun-category5">О
проекте ALWoW</a></h1>
<p><a href="http://alwow.ru/viewforum.php?id=94">Гостевой
раздел и помощь</a></p>
<p><a href="http://alwow.ru/viewforum.php?id=71">О
нашем форуме</a></p>
</li>
<li>
<h1><a href="http://alwow.ru/=&amp;pun-category6">Off
topic, флуд</a></h1>
<p><a href="http://alwow.ru/viewforum.php?id=72">Беседка</a></p>
<p><a href="http://alwow.ru/viewforum.php?id=88">Форумные
игры</a></p>
<p><a href="http://alwow.ru/viewforum.php?id=87">Ваша
реклама</a></p>
<p><a href="http://alwow.ru/viewforum.php?id=78">Корзина</a></p>
</li>
</ul>
</div>
</body>
</html>

Работу этой части кода можно посмотреть тут: http://alwow.ru/pages/1_chast_skripta_vertikalnogo_men

т.е. я поставил ссылки свои на уже имеющемся скрипте в HTML редакторе.

теперь мне необходимо доделать меню, в идеале хочется сотворить нечто подобное этому: http://webdesignersdesk.com/demo/vmenu/

само меню хочу разместить слева под поиском от google вместо картинки-заплатки, ширина 160px высота не важна.

сам форум находится тут http://alwow.ru
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Den1xxx
Den1xxx
сообщение 7.8.2011, 10:35; Ответить: Den1xxx
Сообщение #2


И в чем вопрос?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
WebMage_hb
WebMage_hb
Topic Starter сообщение 7.8.2011, 10:45; Ответить: WebMage_hb
Сообщение #3


(Den1xxx @ 7.8.2011, 13:35) *
И в чем вопрос?

Вопрос: Что можно добавить к вышеупомянутому коду, чтобы меню выглядело таким образом?
Желательно бы в готовом виде получить скрипт.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Axe_hb
Axe_hb
сообщение 7.8.2011, 15:50; Ответить: Axe_hb
Сообщение #4


где то я видел в инете такое прыгающее меню, могу написать код меню которое при нажатии открывается и при повторном закрывается,при наведении меняет цвет..., и при переходе на другую страницу обратно не сворачивается (куки юзаю)
надо?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
WebMage_hb
WebMage_hb
Topic Starter сообщение 7.8.2011, 16:09; Ответить: WebMage_hb
Сообщение #5


(Axe_hb @ 7.8.2011, 18:50) *
надо?

Спрашиваете =) Конечно же надо, часа 4 уже обновляю, жду ответов в теме =)
Вот с этого материала я начал делать, но невкуриваю что после первого этапа делать.
http://www.coolwebmasters.com/menu-and-nav...ith-jquery.html
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Axe_hb
Axe_hb
сообщение 7.8.2011, 16:41; Ответить: Axe_hb
Сообщение #6


короче вот хтмл со скриптами:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('ul#my-menu ul').each(function(i) {
if ($.cookie('submenuMark-' + i)) {
$(this).show().prev().removeClass('collapsed').addClass('expanded');
}else {
$(this).hide().prev().removeClass('expanded').addClass('collapsed');
}
$(this).prev().addClass('collapsible').click(function() {
var this_i = $('ul#my-menu ul').index($(this).next());
if ($(this).next().css('display') == 'none') {
$(this).next().slideDown(200, function () {
$(this).prev().removeClass('collapsed').addClass('expanded');
cookieSet(this_i);
});
}else {
$(this).next().slideUp(200, function () {
$(this).prev().removeClass('expanded').addClass('collapsed');
cookieDel(this_i);
$(this).find('ul').each(function() {
$(this).hide(0, cookieDel($('ul#my-menu ul').index($(this)))).prev().removeClass('expanded').addClass('collapsed');
});
});
}
return false;
});
});
});
function cookieSet(index) {
$.cookie('submenuMark-' + index, 'opened', {expires: null, path: '/'});
}
function cookieDel(index) {
$.cookie('submenuMark-' + index, null, {expires: null, path: '/'});
}
</script>

</head>
<body>

<script>
function parseAddr() {
var adr=window.location.pathname.split("/");
var page=adr[adr.length-1];
return page;
}

function setLinkClass() {
var adr=parseAddr();
var ul=document.getElementById('menubar');
var as=ul.getElementsByTagName('a');
for(var i=0; i<as.length; i++) {
var a=as[i];
var pgs=a.pathname.split("/");
var page=pgs[pgs.length-1];
if(page==adr) {
a.className='activ'; a.href='#';
}
}
}
</script>
<font size=+1>
<h4>Меню</h4>
<div id="menubar">
<ul id="my-menu" class="sample-menu">
<li><a href="index.php" id="a">главная страница</a></li>

<li><a href="1.php" id="a">открывающийся пункт меню&nbsp;</a>
<ul><li><a href="history.php#verx" id="div"><font color="green">&rArr;</font>меню</a></li>
<li><a href="raspletin.php#verx" id="div"><font color="green">&rArr;</font>меню</a></li>
<li><a href="baza.php#verx" id="div"><font color="green">&rArr;</font>меню</a></li>
<li><a href="javascript: alert('Страница в разработке');" id="div"><font color="green">&rArr;</font> меню</a></li></ul></li>

<li><a href="2.php" id="a">открывающийся пункт меню&nbsp;</a>
<ul><li><a href="novosti.php#verx" id="div"><font color="green">&rArr;</font>меню</a></li>
<li><a href="javascript: alert('Страница в разработке');" id="div"><font color="green">&rArr;</font> меню</a></li>
<li><a href="javascript: alert('Страница в разработке');" id="div"><font color="green">&rArr;</font> меню</a></li>
<li><a href="javascript: alert('Страница в разработке');" id="div"><font color="green">&rArr;</font> меню</a></li></ul></li>

<li><a href="3.php" id="a">открывающийся пункт меню&nbsp;</a>
<ul><li><a href="specialnosti.php#verx" id="div"><font color="green">&rArr;</font>меню</a></li>
<li><a href="javascript: alert('Страница в разработке');" id="div"><font color="green">&rArr;</font> меню</a></li>
<li><a href="javascript: alert('Страница в разработке');" id="div"><font color="green">&rArr;</font> меню</a></li>
<li><a href="javascript: alert('Страница в разработке');" id="div"><font color="green">&rArr;</font> меню</a></li>
<li><a href="zayavka.php" id="div"><font color="green">&rArr;</font> Онлайн заявка</a></li>

</a></li></ul></li>

<li><a href="4.php" id="a">открывающийся пункт меню&nbsp;</a>
<ul><li><a href="javascript: alert('Страница в разработке');" id="div"><font color="green">&rArr;</font>меню</a></li>
<li><a href="javascript: alert('Страница в разработке');" id="div"><font color="green">&rArr;</font> меню</a></li>
<li><a href="javascript: alert('Страница в разработке');" id="div"><font color="green">&rArr;</font> меню</a></li>
<li><a href="fotomeropr.php" id="div"><font color="green">&rArr;</font>меню</a></li></ul></li></ul>
<script type="text/javascript">setLinkClass();</script>
</div>

</font>
</body>
<html>


вот css для всего этого:

[CSS]
#a {
display:block;
background-color:white; /*цвет раскрывающегося пункта*/
margin-top:5px;
text-align:right;
padding:13px;
background-image:URL(buttom2.gif);
background-size:100%;
background-repeat: no-repeat;
outline:none;
text-decoration: none;
color: green;
}

#a:hover {
background-image:URL(buttom.gif) ;
background-repeat: no-repeat;
background-color:black; /*цвет при наведении на пункт*/
text-decoration: none;
color: green;
}

#a.activ {
background-image:URL(buttom0.gif);
background-repeat: no-repeat;
background-color:#blue; /*цвет при щелчке на пункт*/
text-decoration:none;
border-right:none;
color: green;
text-decoration: none;
}

ul {
background:white;
background-color:#white;
margin:0;
padding:0;
list-style:none;
}

ul ul {
margin:2px 0 0 14px;
}

ul li li{
text-align: left;
margin-bottom:2px;
}

#div {
display:block;
padding:2px 4px;
background:gray; /*отдельные пункты в списке*/
border:1px solid #cba;
outline:none;
text-decoration: none;
color: black;
}

#div:hover {
background:white;
text-decoration: none;
color: black;
}

#div.activ {
background:white;
text-decoration:none;
border-right:none;
color: black;
text-decoration: none;
}


.menu {
-moz-box-shadow: 0 0 10px #555;
-webkit-box-shadow: 0 0 10px #555;
box-shadow: 0 0 10px #555;
background: gray;
padding: 7px;
}
[/CSS]

ну цвета можешь методом тыка найти что за какой отвечает =)
ещё должен быть файл у тебя с названием jquery.cookie.js c таким содержанием:

[JS]
jQuery.cookie = function(name, value, options) {
if (typeof value != 'undefined') { // name and value given, set cookie
options = options || {};
if (value === null) {
value = '';
options.expires = -1;
}
var expires = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
}
// CAUTION: Needed to parenthesize options.path and options.domain
// in the following expressions, otherwise they evaluate to undefined
// in the packed version for some reason...
var path = options.path ? '; path=' + (options.path) : '';
var domain = options.domain ? '; domain=' + (options.domain) : '';
var secure = options.secure ? '; secure' : '';
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
} else { // only name given, get cookie
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
};[/JS]

и стандартный файлик jquery.js, он длинный выкладывать не буду,скачать можно где угодно
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
WebMage_hb
WebMage_hb
Topic Starter сообщение 7.8.2011, 18:06; Ответить: WebMage_hb
Сообщение #7


Axe огромное спасибо за труд!
Тут такое дело, что я не могу какой либо файл, кроме изображений залить на форум..
ну на нашем сервисе работает jQuery, только надо будет в админке прописать в поле HTML-верх:
[JS]<script type="text/javascript" src="http://ruseller.com/lessons/les558/example/jquery-1.4.2.min.js"></script>[/JS]
думаю это подойдёт вместо того что Вы назвали
(Axe_hb @ 7.8.2011, 19:41) *
и стандартный файлик jquery.js

а вот на счёт
(Axe_hb @ 7.8.2011, 19:41) *
должен быть файл у тебя с названием jquery.cookie.js

я не уверен.
И опять же я несмогу самостоятельно написать как начинается CSS часть кода т.е. напишите что в начале этой части с CSS поставить там должно же быть что то типа <style css> и закрыть эту часть с закрывающимся тэгом </style> у Вас без начала и конца как бы =) и тоже самое чем открыть и закрыть третью часть с jQuery я сам не смогу.
HTML-код (верхнюю часть я сам смогу ссылки какие надо поставить и с цветом разберусь.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Axe_hb
Axe_hb
сообщение 7.8.2011, 21:30; Ответить: Axe_hb
Сообщение #8


содержание всего файла jquery.cookie.js я написал, пишу ещё раз:
[JS]
jQuery.cookie = function(name, value, options) {
if (typeof value != 'undefined') { // name and value given, set cookie
options = options || {};
if (value === null) {
value = '';
options.expires = -1;
}
var expires = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
}
// CAUTION: Needed to parenthesize options.path and options.domain
// in the following expressions, otherwise they evaluate to undefined
// in the packed version for some reason...
var path = options.path ? '; path=' + (options.path) : '';
var domain = options.domain ? '; domain=' + (options.domain) : '';
var secure = options.secure ? '; secure' : '';
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
} else { // only name given, get cookie
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
};

[/JS]

тоесть тупо делаешь блокнотовский файл, копируешь все это туда и сохраняешь его как название этого файла.Подключать его не надо,он уже подключен.
То же самое с файлом css. ты отдельно пихаешь его в файл style.css и подключаешь его в index.html (index.php незнаю как у тебя)

Итого для этого меню в папке с сайтом должны быть файлы:
style.css, jquery.js (они подключаются в index), jqury.cookie.js ну и index.html

на первый взгляд гемор, но учитывая то что я написал тебе остется только подключить файлы и скопировать по файлам мои каляки
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
powerara
powerara
сообщение 7.8.2011, 21:30; Ответить: powerara
Сообщение #9


(WebMage_hb @ 7.8.2011, 21:06) *
И опять же я несмогу самостоятельно написать как начинается CSS часть кода т.е. напишите что в начале этой части с CSS поставить там должно же быть что то типа <style css> и закрыть эту часть с закрывающимся тэгом </style> у Вас без начала и конца как бы =) и тоже самое чем открыть и закрыть третью часть с jQuery я сам не смогу.
HTML-код (верхнюю часть я сам смогу ссылки какие надо поставить и с цветом разберусь.


Бред сумашедшего. Прежде чем вообще заниматься сайтами, неужели нереально прочесть пару книг или хотябы блогов?

Чтобы "прилепить" css к странице, пропиши:
<link href="css/style.css" rel="stylesheet" type="text/css" />


А так названная "третья" часть, это содержание скрипта. Тоесть создаешь новый документ в блокноте, прописываешь там всю "третью часть" и сохраняешь как jquery.cookie.js
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
WebMage_hb
WebMage_hb
Topic Starter сообщение 7.8.2011, 21:39; Ответить: WebMage_hb
Сообщение #10


Прошу прощения, прежде чем советовать мне прочитать пару книг сам не можеш прочитать пары моих постов. У МЕНЯ НЕТ ВОЗМОЖНОСТИ КИДАТЬ ФАЙЛЫ НА ФОРУМ КРОМЕ ИЗОБРАЖЕНИЙ
Axe, спасибо за старания! если интересно то могу кинуть через ЛС адресс логин и пароль к форуму который служит мне тестовиком, посмотрите как приходиться выёбы**ться чтобы сделать что то оригинальное.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Посоветуйте массажер для спины и шеи
9 Boymaster 866 Сегодня, 13:56
автор: Vmir
Открытая тема (нет новых ответов) Какой % отказов нормален для сайта?
14 Aloof 3368 Сегодня, 13:50
автор: Vmir
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыЛюблю творить! Статьи для вас
Копирайтинг- моя жизнь!
312 Zoya83 190658 Сегодня, 7:51
автор: DimonX
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыСовременный сервис для быстрого и безопасного обмена валют.
15 CryptoTims 4948 Вчера, 22:32
автор: CryptoTims
Открытая тема (нет новых ответов) Rebex.io – Ваша инновационная платформа для обмена криптовалюты!
2 Rebex 819 Вчера, 20:04
автор: Rebex


 



RSS Текстовая версия Сейчас: 23.4.2024, 20:49
Дизайн