Помощник
|
Горизонтальное меню для форума с использованием HTML и jQuery |
WebMage_hb
|
Сообщение
#1
|
||
|
|
||
|
|||
Den1xxx |
7.8.2011, 10:35;
Ответить: Den1xxx
Сообщение
#2
|
|
И в чем вопрос?
|
|
|
WebMage_hb
|
Сообщение
#3
|
|
И в чем вопрос? Вопрос: Что можно добавить к вышеупомянутому коду, чтобы меню выглядело таким образом? Желательно бы в готовом виде получить скрипт. |
|
|
Axe_hb |
7.8.2011, 15:50;
Ответить: Axe_hb
Сообщение
#4
|
|
где то я видел в инете такое прыгающее меню, могу написать код меню которое при нажатии открывается и при повторном закрывается,при наведении меняет цвет..., и при переходе на другую страницу обратно не сворачивается (куки юзаю)
надо? |
|
|
WebMage_hb
|
Сообщение
#5
|
|
надо? Спрашиваете =) Конечно же надо, часа 4 уже обновляю, жду ответов в теме =) Вот с этого материала я начал делать, но невкуриваю что после первого этапа делать. http://www.coolwebmasters.com/menu-and-nav...ith-jquery.html |
|
|
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">открывающийся пункт меню </a> <ul><li><a href="history.php#verx" id="div"><font color="green">⇒</font>меню</a></li> <li><a href="raspletin.php#verx" id="div"><font color="green">⇒</font>меню</a></li> <li><a href="baza.php#verx" id="div"><font color="green">⇒</font>меню</a></li> <li><a href="javascript: alert('Страница в разработке');" id="div"><font color="green">⇒</font> меню</a></li></ul></li> <li><a href="2.php" id="a">открывающийся пункт меню </a> <ul><li><a href="novosti.php#verx" id="div"><font color="green">⇒</font>меню</a></li> <li><a href="javascript: alert('Страница в разработке');" id="div"><font color="green">⇒</font> меню</a></li> <li><a href="javascript: alert('Страница в разработке');" id="div"><font color="green">⇒</font> меню</a></li> <li><a href="javascript: alert('Страница в разработке');" id="div"><font color="green">⇒</font> меню</a></li></ul></li> <li><a href="3.php" id="a">открывающийся пункт меню </a> <ul><li><a href="specialnosti.php#verx" id="div"><font color="green">⇒</font>меню</a></li> <li><a href="javascript: alert('Страница в разработке');" id="div"><font color="green">⇒</font> меню</a></li> <li><a href="javascript: alert('Страница в разработке');" id="div"><font color="green">⇒</font> меню</a></li> <li><a href="javascript: alert('Страница в разработке');" id="div"><font color="green">⇒</font> меню</a></li> <li><a href="zayavka.php" id="div"><font color="green">⇒</font> Онлайн заявка</a></li> </a></li></ul></li> <li><a href="4.php" id="a">открывающийся пункт меню </a> <ul><li><a href="javascript: alert('Страница в разработке');" id="div"><font color="green">⇒</font>меню</a></li> <li><a href="javascript: alert('Страница в разработке');" id="div"><font color="green">⇒</font> меню</a></li> <li><a href="javascript: alert('Страница в разработке');" id="div"><font color="green">⇒</font> меню</a></li> <li><a href="fotomeropr.php" id="div"><font color="green">⇒</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
|
Сообщение
#7
|
|
Axe огромное спасибо за труд!
Тут такое дело, что я не могу какой либо файл, кроме изображений залить на форум.. ну на нашем сервисе работает jQuery, только надо будет в админке прописать в поле HTML-верх: [JS]<script type="text/javascript" src="http://ruseller.com/lessons/les558/example/jquery-1.4.2.min.js"></script>[/JS] думаю это подойдёт вместо того что Вы назвали и стандартный файлик jquery.js а вот на счёт должен быть файл у тебя с названием jquery.cookie.js я не уверен. И опять же я несмогу самостоятельно написать как начинается CSS часть кода т.е. напишите что в начале этой части с CSS поставить там должно же быть что то типа <style css> и закрыть эту часть с закрывающимся тэгом </style> у Вас без начала и конца как бы =) и тоже самое чем открыть и закрыть третью часть с jQuery я сам не смогу. HTML-код (верхнюю часть я сам смогу ссылки какие надо поставить и с цветом разберусь. |
|
|
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 |
7.8.2011, 21:30;
Ответить: powerara
Сообщение
#9
|
|
И опять же я несмогу самостоятельно написать как начинается CSS часть кода т.е. напишите что в начале этой части с CSS поставить там должно же быть что то типа <style css> и закрыть эту часть с закрывающимся тэгом </style> у Вас без начала и конца как бы =) и тоже самое чем открыть и закрыть третью часть с jQuery я сам не смогу. HTML-код (верхнюю часть я сам смогу ссылки какие надо поставить и с цветом разберусь. Бред сумашедшего. Прежде чем вообще заниматься сайтами, неужели нереально прочесть пару книг или хотябы блогов? Чтобы "прилепить" css к странице, пропиши: <link href="css/style.css" rel="stylesheet" type="text/css" /> А так названная "третья" часть, это содержание скрипта. Тоесть создаешь новый документ в блокноте, прописываешь там всю "третью часть" и сохраняешь как jquery.cookie.js |
|
|
WebMage_hb
|
Сообщение
#10
|
|
Прошу прощения, прежде чем советовать мне прочитать пару книг сам не можеш прочитать пары моих постов. У МЕНЯ НЕТ ВОЗМОЖНОСТИ КИДАТЬ ФАЙЛЫ НА ФОРУМ КРОМЕ ИЗОБРАЖЕНИЙ
Axe, спасибо за старания! если интересно то могу кинуть через ЛС адресс логин и пароль к форуму который служит мне тестовиком, посмотрите как приходиться выёбы**ться чтобы сделать что то оригинальное. |
|
|
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Посоветуйте массажер для спины и шеи | 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 |
Текстовая версия | Сейчас: 23.4.2024, 20:49 |