Помощь админам бесплатных форумов на PHPBB3 http://admins.bestforums.org/ |
|
Нижнее горизонтальное навигационное меню http://admins.bestforums.org/viewtopic.php?f=6&t=241 |
Страница 4 из 5 |
Автор: | Neogotlic [ 11 июн 2013, 22:11 ] |
Заголовок сообщения: | Re: Нижнее горизонтальное навигационное меню |
А как сделать, чтобы куку вешало когда пользователь его сворачивает? И еще, код будет валидным, если будет вот такой: Код: <div class="menuContent">
<a class="slider"><img alt="" id="bot" src="http://renault-symbol-club.ru/images/arrow_bottom.png" /></a> <ul id="nav"> <li><a href="./index.php"><img src="http://renault-symbol-club.ru/images/t1.png" alt=""/> Главная</a></li> <li> <ul> <li><a href="#"><img src="http://renault-symbol-club.ru/images/empty.gif" alt="" />1</a></li> <li><a href="#"><img src="http://renault-symbol-club.ru/images/empty.gif" alt="" />Ссылка 2</a></li> <li><a href="#"><img src="http://renault-symbol-club.ru/images/empty.gif" alt="" />Ссылка 3</a></li> <li><a href="#"><img src="http://renault-symbol-club.ru/images/empty.gif" alt="" />Ссылка 4</a></li> <li><a href="#"><img src="http://renault-symbol-club.ru/images/empty.gif" alt="" />Ссылка 5</a></li> </ul> <a href="#" class="sub" tabindex="1"><img src="http://renault-symbol-club.ru/images/t1.png" alt="" />Вопрос-ответ</a> </li> <li> <ul> <li><a href="#"><img src="images/empty.gif" alt="" />Вопрос-ответ </a></li> <li><a href="#"><img src="images/empty.gif" alt="" />Ссылка 7</a></li> <li><a href="#"><img src="images/empty.gif" alt="" />Ссылка 8</a></li> <li><a href="#"><img src="images/empty.gif" alt="" />Ссылка 9</a></li> <li><a href="#"><img src="images/empty.gif" alt="" />Ссылка 10</a></li> </ul> <a href="#" class="sub" tabindex="1"><img src="http://renault-symbol-club.ru/images/t1.png" alt="" />Тех-ноты</a> </li> <li><a href="#"><img src="http://renault-symbol-club.ru/images/t1.png" alt="" />Фото отчеты</a></li> </ul> </div> |
Автор: | nephalim [ 11 июн 2013, 23:45 ] |
Заголовок сообщения: | Re: Нижнее горизонтальное навигационное меню |
С вешаньем куки вот таким вот макаром преобразил script.js Код: var menuposit = document.cookie.match(new RegExp("(?:^|; )" + "menuclose" + "=([^;]*)")); if (decodeURIComponent(menuposit[1])=="true") $('#nav').slideToggle(300); $(function(){ $('.slider').click(function () { $('#nav').slideToggle(300); var img = $(this).find('img'); if ($(img).attr('id') == 'bot') { $(img).attr('src', 'http://pomoschadmina.myfor.ru/storage/pomoschadmina_myfor_ru/images/arrow_top.png'); $(img).attr('id', 'top'); document.cookie="menuclose=true; path=/; expires=Mon, 01-Jan-2015 00:00:00 GMT"; } else { $(img).attr('src', 'http://pomoschadmina.myfor.ru/storage/pomoschadmina_myfor_ru/images/arrow_bottom.png'); $(img).attr('id', 'bot'); document.cookie="menuclose=true; path=/; expires=Mon, 01-Jan-2011 00:00:00 GMT"; } }); $('.sub').click(function () { var cur = $(this).prev(); $('#nav li ul').each(function() { if ($(this)[0] != $(cur)[0]) $(this).slideUp(300); }); $(cur).slideToggle(300); }); }); Внимание: код на работоспособность не проверялся, наваял в течении 15 минут по материалам вот этого источника и вот этого . Имею бурную надежду что задумка сведущими будет понята в полном объёме, и будут исправлены имеющиеся в моём скромном кодишке ошибки. Заранее признателен за понимамс |
Автор: | nephalim [ 12 июн 2013, 23:14 ] |
Заголовок сообщения: | Re: Нижнее горизонтальное навигационное меню |
Эм, тишина лишенная критики как минимум настораживает Думаю стоит детальнее растолковать касательно нововведения с куками о которых тут изначально упомянул мой друг Neogotlic. Задумка состоит в следующем - пользователь заходит на сайт, снизу у него всплывает это меню, и он нажав на соответствующую ссылку размещенную сверху справа, это меню соотвественно скрыл. Далее либо - пользователь продолжает просматривать другие страницы сайта, либо логинится/регистрируется, и это соответственно сопровождается показом вновь и вновь этого меню которое он только что скрыл при каждом переходе на страницы сайта либо обновлении страницы текущей. Соответственно назревает мысль - а почему бы не сделать так, чтобы меню однажды будучи скрытым (и не развёрнутым до перехода на другую страницу или обновления текущей) оставалось в таком положении во время всего оставшегося сёрфинга по страницам оного ресурса? Немного поразмыслив я пришёл к выводу что в решении этой проблемы вполне могли бы помочь кукисы, которые бы вешались по событию сворачивания меню и соответственно удалялись по событию разворачивания оного меню. При загрузке страницы скрипт бы просматривал наличие этих повешенных кукис и при их наличии самостоятельно давал бы команду на сворачивание меню. К слову - было бы также полезно в меню предусмотреть наличие чекбокса типо "Запомнить положение меню при переходе на другую страницу", и пусть скрипт вешает куку только по значению "on" этого чекбокса (соответственно падает в checked при наличии кукис после загрузки новой страницы) |
Автор: | nephalim [ 13 июн 2013, 22:19 ] |
Заголовок сообщения: | Re: Нижнее горизонтальное навигационное меню |
Исправил собственные ошибки в script.js, теперь код выглядит вот так Код: function getCookie(name) { var inrval = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)")); return inrval ? decodeURIComponent(inrval[1]) : undefined; } $(function(){ if(getCookie("menuclose")!=undefined) $('#nav').slideToggle(300); $('.slider').click(function () { if (getCookie("menuclose")!=undefined) document.cookie="menuclose=true; path=/; expires=Mon, 01-Jan-2000 00:00:00 GMT"; else document.cookie="menuclose=true; path=/; expires=Mon, 01-Jan-2020 00:00:00 GMT"; $('#nav').slideToggle(300); var img = $(this).find('img'); if ($(img).attr('id') == 'bot') { $(img).attr('src', '/images/arrow_top.png'); $(img).attr('id', 'top'); } else { $(img).attr('src', '/images/arrow_bottom.png'); $(img).attr('id', 'bot'); } }); $('.sub').click(function () { var cur = $(this).prev(); $('#nav li ul').each(function() { if ($(this)[0] != $(cur)[0]) $(this).slideUp(300); }); $(cur).slideToggle(300); }); }); и полностью работоспособен, качаем сам скрипт вот тут. Соответственно чекбокса пока не вводил, будет народ интересоваться - сделаю. Ато мне разговор тут с самим собой не очень то и по душе. Всем большущее спасибо за внимание и ошеломляющую активность. |
Автор: | vikweb [ 15 июн 2013, 10:16 ] |
Заголовок сообщения: | Re: Нижнее горизонтальное навигационное меню |
nephalim огромное спасибо за помощь и за разработку данного скрипта! прошу прощение за долгое молчание, просто последнее время из-за огромной загруженности, у меня мало времени на форум |
Автор: | glebos [ 15 апр 2015, 09:41 ] |
Заголовок сообщения: | Re: Нижнее горизонтальное навигационное меню |
А подскажите плиз как сделать что бы кнопки были по центру? А то кнопок например 3 и получается полу пустая строка. Еще лучше что бы строка меню была по центру, а не на всю ширину, и расширялась если добавить еще кнопку. Такое возможно? |
Автор: | glebos [ 16 апр 2015, 08:48 ] |
Заголовок сообщения: | Re: Нижнее горизонтальное навигационное меню |
А мне ваш ответ не понятен... я не говорил что у меня что то не получилось, все получилось, но кнопки расположены слева, как и у вас, что на данном форуме, что на прикрепленном скриншоте. Я же спросил как сделать что бы эти кнопки были по центру полоски меню, или ширину полоски изменить(не высоту) Если так не понятно, то вот тест, тут 1 кнопка, пусть их будет три, но они все начинают заполнение слева на права |
Автор: | vikweb [ 16 апр 2015, 17:57 ] |
Заголовок сообщения: | Re: Нижнее горизонтальное навигационное меню |
позвольте поинтересоваться, писать вы начинаете с центра, или в с лева на право? |
Страница 4 из 5 | Часовой пояс: UTC + 1 час [ Летнее время ] |
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group http://www.phpbb.com/ |