Меню навигации в левой панели

Поделиться1Ср, 27 Июл 2011 23:44:16

Автор: Obsidian
Заслуженный
Зарегистрирован: Пт, 13 Авг 2010
Сообщений: 162
Уважение: +8
Позитив: +34
Последний визит:
Чт, 27 Окт 2011 21:00:41

С трудом осилил думаю что все з стр. тем этого раздела но так и не нашёл скрипта меню навигации.
меня интересует небольшой блок горизонтальных кнопок (хорошо бы ещё с модными эффектами) в верхнюю часть боковой панели моего форума http://alwow.ru .

Вот и эскиз прикрепил, цифра 1 это само меню, а под цифрой 2 я обозначил "мечту" выпадающие подменю.

Вот такой мне скрипт и нужен.

Отредактировано Obsidian (Чт, 28 Июл 2011 04:09:56)

0

Поделиться2Чт, 28 Июл 2011 03:01:38

Автор: rps
Стремясь к новому...
Зарегистрирован: Вс, 12 Окт 2008
Сообщений: 22652
Уважение: +4738
Позитив: +3431
Пол: Мужской
Предупреждения: ‡ 1. 2. 3. ... 10!
Последний визит:
Вс, 14 Мар 2021 21:42:57

Obsidian
Здравствуйте.

Obsidian написал(а):

Вот и эскиз прикрепил, цифра 1 это само меню? а под цифрой 2 я обозначил "мечту" выпадаюие меню.
Вот такой мне скрипт и нужен.

Тут смотрели: Помощь по созданию бокового меню!?

0

Поделиться3Чт, 28 Июл 2011 03:51:12

Автор: Obsidian
Заслуженный
Зарегистрирован: Пт, 13 Авг 2010
Сообщений: 162
Уважение: +8
Позитив: +34
Последний визит:
Чт, 27 Окт 2011 21:00:41

rps написал(а):

Тут смотрели: Помощь по созданию бокового меню!?

Читал, это пожалуй единственное что мне удалось найти, мне это не подходит, посмотрел "рабочий" вариант но так и не понял что это.

пока ждал ответа, нагуглил кое какие материалы:

http://www.webstroyka.com/view_post.php?id=23

выдернул код:

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Demo</title>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<style type="text/css">
body {
    margin: 10px auto;
    font: 100%/120% Verdana,Arial, Helvetica, sans-serif;
}
.menu_list {    
    width: 162px;
}
.menu_head {
    padding: 5px 10px;
    cursor: pointer;
    position: relative;
    margin:1px;
    font-weight:bold;
    background: #333 url(http://bogd.png) center right no-repeat;
    color:#7fff00;
}
.menu_body {
    display:none;
}
.menu_body a{
  display:block;
  color:#555;
  background-color:#999;
  padding-left:10px;
  font-weight:bold;
  text-decoration:none;
}
.menu_body a:hover{
  color: #333;
  text-decoration:underline;
  }
</style>
</head>
<body>
<div style="float:left" > 
 
  <div id="firstpane" class="menu_list">
        <p class="menu_head">Меню</p>
        <div class="menu_body">
        <a href="#">Главная</a>
         <a href="#">Форум</a>  
         <a href="#">Блог</a>   
         <a href="#">Контакты</a>   
          <a href="#">О проекте</a>
        </div>
        <p class="menu_head">Публикации</p>
        <div class="menu_body">
            <a href="#">Новости</a>
         <a href="#">Статьи</a>
         <a href="#">Закачки</a>    
        </div>
        <p class="menu_head">Профиль</p>
        <div class="menu_body">
          <a href="#">Мои друзья</a>
         <a href="#">Мои сообщения</a>
         <a href="#">Мои файлы</a>      
         <a href="#">Выйти</a>      
       </div>
  </div>  
</div>
<script type="text/javascript">

$(document).ready(function()
{

    $("#firstpane p.menu_head").click(function()
    {
        $(this).css({backgroundImage:"url(img/down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
        $(this).siblings().css({backgroundImage:"url(img/left.png)"});
    });
    
});
</script>
</body>
</html>

буду дальше делать если вопросы возникнут, думаю не оставите без внимания.
:tomato:

Отредактировано Obsidian (Чт, 28 Июл 2011 04:59:42)

0

Поделиться4Пт, 29 Июл 2011 20:23:18

Автор: rps
Стремясь к новому...
Зарегистрирован: Вс, 12 Окт 2008
Сообщений: 22652
Уважение: +4738
Позитив: +3431
Пол: Мужской
Предупреждения: ‡ 1. 2. 3. ... 10!
Последний визит:
Вс, 14 Мар 2021 21:42:57

Obsidian написал(а):

мне это не подходит

Чем?

0

Поделиться5Вс, 7 Авг 2011 00:08:27

Автор: Obsidian
Заслуженный
Зарегистрирован: Пт, 13 Авг 2010
Сообщений: 162
Уважение: +8
Позитив: +34
Последний визит:
Чт, 27 Окт 2011 21:00:41

всё ещё мучаюсь, хотел сделать как показано тут http://www.coolwebmasters.com/menu-and- … query.html
но получилась борода :no: вот на тестовике можно посмотреть http://bogdana.0pk.ru/, там ссылки в верхнем меню преобрели глюк =)
вот какой у меня скрипт получился

Код:

<!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>

<!--- этап 2 стили CSS --->
<style>
li {
    height:20px;
    width:160px;
    overflow:hidden;  /* Important */
        color: #fff;
        text-decoration: none;
        font-weight: bold;
        line-height: 1;
                              /* Rounded Corners */
       -moz-border-radius: 5px;
       -webkit-border-radius: 5px;
                              /* Box Shadow */
       -moz-box-shadow: 0 1px 3px #999;
       -webkit-box-shadow: 0 1px 3px #999;
                              /* Text Shadow */
       text-shadow: 0 -1px 1px #222;
       border-bottom: 1px solid #222;
       padding: 7px 10px 6px;
       margin-top:5px;
       background-color:#a447cf;
}
li p {
    margin-top:10px;
    font-size:12px;
    color:#6CF;
}
</style>
<!-- 3й этап Этап 3: добавляем jQuery и Easing Plugin -->
<script src="jquery.min.js" type="text/javascript"></script>
<script src="custom.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<!-- 4й этап jQuuery -->
<script>
$(document).ready(function(){
    //When Mouse rolls over li
    $("li").mouseover(function(){
        $(this).stop().animate({height:'60px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });
    //When Mouse cursor removed from li
    $("li").mouseout(function(){
        $(this).stop().animate({height:'20px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });
});
</script>

каша одним словом, может поможете до ума довести? а то получится что только зря первую часть кода редактировал под свой форум http://alwow.ru
хочу поставить менюшку эту над поиском и убрать геморойную заплатку под поиском

0

Поделиться6Вс, 7 Авг 2011 00:14:53

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51112
Уважение: +15195
Позитив: +11564
Последний визит:
Сегодня 17:21:04

Obsidian Сделайте эскиз чо должно получицо в итоге... чот мну не поймёт и что это меню выполняет ( у меня такое ощущение - что Вы вполне можете обойтись без скриптов чисто css

При наведении и без наведения

вот слево - вверху (в левой колонке, которая рядом с форумами - категориями - такое меню не подойдёт ?

http://forumd.ru/

Отредактировано Deff (Вс, 7 Авг 2011 00:18:14)

0

Поделиться7Вс, 7 Авг 2011 00:26:14

Автор: Obsidian
Заслуженный
Зарегистрирован: Пт, 13 Авг 2010
Сообщений: 162
Уважение: +8
Позитив: +34
Последний визит:
Чт, 27 Окт 2011 21:00:41

Deff написал(а):

вот слево - вверху (в левой колонке, которая рядом с форумами - категориями - такое меню не подойдёт ?

да буду очень рад хотя бы этой менюшке, только бы ещё стиль самого форума приобрела =) кстати форум интересный, добавил в закладки.

а ранее пробовал сделать как вот на этом demo http://webdesignersdesk.com/demo/vmenu/

Отредактировано Obsidian (Вс, 7 Авг 2011 10:06:33)

0

Поделиться8Вс, 7 Авг 2011 00:43:58

Автор: Obsidian
Заслуженный
Зарегистрирован: Пт, 13 Авг 2010
Сообщений: 162
Уважение: +8
Позитив: +34
Последний визит:
Чт, 27 Окт 2011 21:00:41

Obsidian написал(а):

http://forumd.ru/

у Вас там аж трёх уровневое меню, мне будет достаточно 2-х т.е. категориии --> форумы

0

Поделиться9Вс, 7 Авг 2011 18:21:51

Автор: Obsidian
Заслуженный
Зарегистрирован: Пт, 13 Авг 2010
Сообщений: 162
Уважение: +8
Позитив: +34
Последний визит:
Чт, 27 Окт 2011 21:00:41

Deff я тут сёня мутил мутил, лазил в интернете и написал на одном из форумов свою просьбу о помощи создания вертикального меню на jQuery вот тутмои басни, тама человек помоему что то написал дельное =)
может что сворганим ? =)
:offtop:
ждал ждал сёня Вас, потом понял что Воскресение =)

0

Поделиться10Вс, 7 Авг 2011 18:28:00

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51112
Уважение: +15195
Позитив: +11564
Последний визит:
Сегодня 17:21:04

Obsidian То меню - что Вы привели на демо - а этом demo o http://webdesignersdesk.com/demo/vmenu/

(*мне не импонирует - во первых какое то желе трясущеся - а занимацо с ним время, - приведите пример, который заинтересует большинство(и меня) = сделаем, = или выберите из имеющегося

0

Поделиться11Вс, 7 Авг 2011 18:35:42

Автор: Obsidian
Заслуженный
Зарегистрирован: Пт, 13 Авг 2010
Сообщений: 162
Уважение: +8
Позитив: +34
Последний визит:
Чт, 27 Окт 2011 21:00:41

Deff написал(а):

или выберите из имеющегося

давайте уж тогда то что предлогали с forumd.ru
достаточно будет того что в самой колонке будут Котегории а при наведении будут виды Форумы.
скрипт Ваш на кликабельность категорий уже стоит у меня.
структура самого меню будет выглядеть так: http://alwow.ru/pages/1_chast_skripta_vertikalnogo_men

Отредактировано Obsidian (Вс, 7 Авг 2011 18:39:15)

0

Поделиться12Вс, 7 Авг 2011 18:49:35

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51112
Уважение: +15195
Позитив: +11564
Последний визит:
Сегодня 17:21:04

Obsidian написал(а):

давайте уж тогда то что предлогали с forumd.ru

Не - честно - вот не нравицо Выпадение Вниз ( мож при таком дизайне строения меню) ну и .... не понравилось

Чичас попробую ( давно не занималсо

0

Поделиться13Вс, 7 Авг 2011 20:03:02

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51112
Уважение: +15195
Позитив: +11564
Последний визит:
Сегодня 17:21:04

Obsidian

Вставляете ниже

<! -------------- ЗАПЛАТКА ------------>
<img style="width: 180px; height: 126px;" alt=""
src="http://forumupload.ru/uploads/0005/27/73/4402-1.png">
<! ----------- ЗАПЛАТКА END------------>

Код

Код:

<!--стиль навигатора-->
<style>
ul#navmenu-v, ul#navmenu-v li, ul#navmenu-v ul {margin: 0; border: 0 none; padding: 0; width: 162px; list-style: none;}
ul#navmenu-v:after {clear: both; display: block; font: 1px/0px serif; content: "."; height: 0; visibility: hidden;}
ul#navmenu-v li {float: left; display: block !important; position: relative; z-index: 100;}
ul#navmenu-v a {border: 1px solid #FFF; border-right-color: #8e8e8e; border-bottom-color: #8e8e8e; padding: 0 6px; display: block; background: #ffffff; color: #666; font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif; text-decoration: none; height: auto !important;}
ul#navmenu-v a:hover, ul#navmenu-v li:hover a, ul#navmenu-v li.iehover a {background: #b5b7b3; color: #FFF;}
ul#navmenu-v li:hover li a, ul#navmenu-v li.iehover li a {background: #b5b7b3; color: #5f5f5f;}
ul#navmenu-v li:hover li a:hover, ul#navmenu-v li:hover li:hover a, ul#navmenu-v li.iehover li a:hover, ul#navmenu-v li.iehover li.iehover a {background: #b5b7b3; color: #FFF;}
ul#navmenu-v li:hover li:hover li a, ul#navmenu-v li.iehover li.iehover li a {background: #b5b7b3;color: #5f5f5f;}
ul#navmenu-v li:hover li:hover li a:hover, ul#navmenu-v li:hover li:hover li:hover a, ul#navmenu-v li.iehover li.iehover li a:hover, ul#navmenu-v li.iehover li.iehover li.iehover a {background: #b5b7b3; color: #FFF;}
ul#navmenu-v li:hover li:hover li:hover li a, ul#navmenu-v li.iehover li.iehover li.iehover li a {background: #b5b7b3; color: #5f5f5f;}
ul#navmenu-v li:hover li:hover li:hover li a:hover, ul#navmenu-v li.iehover li.iehover li.iehover li a:hover {background: #b5b7b3;color: #FFF;}
ul#navmenu-v ul, ul#navmenu-v ul ul, ul#navmenu-v ul ul ul {display: none; position: absolute; top: 0; left: 165px;}
ul#navmenu-v li:hover ul ul, ul#navmenu-v li:hover ul ul ul, ul#navmenu-v li.iehover ul ul, ul#navmenu-v li.iehover ul ul ul {display: none;}
ul#navmenu-v li:hover ul, ul#navmenu-v ul li:hover ul, ul#navmenu-v ul ul li:hover ul, ul#navmenu-v li.iehover ul, ul#navmenu-v ul li.iehover ul, ul#navmenu-v ul ul li.iehover ul {display: block;}
</style>
<center>

                          <ul id="navmenu-v">
                            <li>
                              <a href="=&pun-category1">World of Warcraft</a>
                              <ul>
                                <li>
                                  <a href="viewforum.php?id=82">Гайды, билды 3.3.5</a>
                                </li>
                                <li>
                                 <a href="viewforum.php?id=95">Гайды, билды Катаклизм</a>
                                </li>
                                <li>
                                 <a href="viewforum.php?id=84">Сервера 3.3.5 - 4.2.0</a>
                                </li>
                                <li>
                                  <a href="viewforum.php?id=79">Наша Таверна</a>
                                 </li>
                              </ul>
                            </li>
                            <li>
                             <a href="=&pun-category2">Компьютерные игры</a>
                              <ul>
                                <li>
                                  <a href="viewforum.php?id=96">Игры -Решение проблем</a>
                                </li>
                                <li>
                                  <a href="viewforum.php?id=86">Разные игры</a>
                                </li>
                                <li>
                              </ul>
                             </li>
                             <li>
                                  <a href="=&pun-category3">Графика и дизайн</a>
                              <ul>
                                <li>
                                  <a href="viewforum.php?id=89">Графика</a>
                                </li>
                                <li>
                                  <a href="viewforum.php?id=92">Стол заказов</a>
                                </li>
                              </ul>
                            </li>
                             <li>
                                <a href="=&pun-category4">Категория IT</a>
                              <ul>
                                <li>
                                  <a href="viewforum.php?id=73">Настройка Windows и программ</a>
                                </li>
                                <li>
                                 <a href="viewforum.php?id=90">Компьютерное железо</a>
                                </li>
                                <li>
                                  <a href="viewforum.php?id=85">Веб-мастеринг, Интернет</a>
                                </li>
                              </ul>
                            </li>
                             <li>
 <a href="=&pun-category5">О проекте ALWoW</a>
                              <ul>
                                <li>
                                  <a href="viewforum.php?id=94">Гостевой раздел и помощь</a>
                                </li>
                                <li>
                                  <a href="viewforum.php?id=71">О нашем форуме</a>
                                </li>
                              </ul>
                             <li>
                                 <a href="=&pun-category6">Off topic, флуд</a>
                              <ul>
                                <li>
                                  <a href="viewforum.php?id=72">Беседка</a>
                                </li>
                                <li>
                                 <a href="viewforum.php?id=88">Форумные игры</a>
                                </li>
                                <li>
                                  <a href="viewforum.php?id=87">Ваша реклама</a>
                                </li>
                                <li>
                                  <a href="viewforum.php?id=78">Корзина</a>
                                </li>
                              </ul>
                            </li>
                          </ul>
                        </center>

Отредактировано Deff (Вс, 7 Авг 2011 20:08:36)

+1

Поделиться14Вс, 7 Авг 2011 20:04:46

Автор: Obsidian
Заслуженный
Зарегистрирован: Пт, 13 Авг 2010
Сообщений: 162
Уважение: +8
Позитив: +34
Последний визит:
Чт, 27 Окт 2011 21:00:41

http://i039.radikal.ru/0806/ec/a5ffc6d7cfd9.gif не открывается картинка

0

Поделиться15Вс, 7 Авг 2011 20:09:06

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51112
Уважение: +15195
Позитив: +11564
Последний визит:
Сегодня 17:21:04

Obsidian Эт плохо

0

Поделиться16Вс, 7 Авг 2011 20:09:22

Автор: Obsidian
Заслуженный
Зарегистрирован: Пт, 13 Авг 2010
Сообщений: 162
Уважение: +8
Позитив: +34
Последний визит:
Чт, 27 Окт 2011 21:00:41

поставил, при наведении на категорию, отлично с виду всё но если курсором повести на строку выпадающего меню, оно исчезает =)
а так нормально =)

0

Поделиться17Вс, 7 Авг 2011 20:10:15

Автор: Obsidian
Заслуженный
Зарегистрирован: Пт, 13 Авг 2010
Сообщений: 162
Уважение: +8
Позитив: +34
Последний визит:
Чт, 27 Окт 2011 21:00:41

Deff написал(а):

Эт плохо

ага

0

Поделиться18Вс, 7 Авг 2011 20:38:30

Автор: Deff
Тутошний...
Зарегистрирован: Ср, 16 Июн 2010
Сообщений: 51112
Уважение: +15195
Позитив: +11564
Последний визит:
Сегодня 17:21:04

Obsidian :glasses: У меня в опере и мазилле так http://savepic.net/1798174.png - ( или об чем Вы - сделайте скриншот

0

Поделиться19Вс, 7 Авг 2011 22:03:35

Автор: Obsidian
Заслуженный
Зарегистрирован: Пт, 13 Авг 2010
Сообщений: 162
Уважение: +8
Позитив: +34
Последний визит:
Чт, 27 Окт 2011 21:00:41

Deff написал(а):

У меня в опере и мазилле так

В новой самой опере, в опере 9.64, последнем хроме и ИЕ 8, всё так как я показал в картинке.
исчезает всплывающее окно с форумами
:offtop:
http://www.html.by/threads/20483-Gorizo … post121858

0

Поделиться20Вс, 7 Авг 2011 22:48:41

Автор: Obsidian
Заслуженный
Зарегистрирован: Пт, 13 Авг 2010
Сообщений: 162
Уважение: +8
Позитив: +34
Последний визит:
Чт, 27 Окт 2011 21:00:41

Кажется понял в чём дело =)
из за того что у меня маленький монитор 14" выпадающие окна налазят на ссылку категории первой и из за этого подглючивает, нужно сделать "название категорий по центру"

0

Единый форум поддержки