О сайте | Обратная связь | Памятка для вебмастера
[ Регистрация · Войти · Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 2
  • 1
  • 2
  • »
Модератор форума: Anka_kuşu, Souteneur  
Форум » Создание сайта » Ucoz » Динамическое 2-х уровневое горизонтальное меню редактирванье
Динамическое 2-х уровневое горизонтальное меню редактирванье
Yasuro Дата: Воскресенье, 08.01.2012, 15:37 | Сообщение # 1
Третьеклашка
Группа: Пользователи
Сообщений: 21
Город: Нижний Новгород
Репутация: 0
Статус: Offline
Я хочу сделать вот так: http://wallaby.ucoz.ru/demo/menu_dinam.html
Но как видите здесь второе(нижнее) меню отображается все время!
А мне нужно что бы оно отображалось только тогда, когда курсор наведешь допустим на вкладку "Шаблон", а как курсор убираю, то меню (второе) чтобы проадало!

Вот css код:

/* ----------- NAVIGATION----------- */
#top-navigation{
background:url(http://wallaby.ucoz.ru/Image/topnav-bg.gif) repeat-x;
width:auto;
height:48px;
margin:0 auto;
}
#navigation{
background:url(http://wallaby.ucoz.ru/Image/nav-bg.gif) repeat-x;
height:32px;
margin:0 auto;
width:auto;
}
#navigation ul{
height:32px;
line-height:32px;
}
#navigation ul li{
display:inline;
}
#navigation ul li a,
#navigation ul li a:visited {
background:url(http://wallaby.ucoz.ru/Image/line-a.gif) right no-repeat;
padding:0 20px;
display:block;
text-decoration:none;
float:left;
color:#4261df;
font-weight:bold;
text-shadow: #ffffff 2px 2px 2px;
}
#navigation ul li a:hover{
color:#1532a5;
}
/* ----------- SUBLINKS ----------- */
#sublinks{
width:auto;
margin:0 auto;
background:#888888 url(http://wallaby.ucoz.ru/Image/sublink.gif);
height:30px;
font-size:11px;
}
#sublinks ul{
height:32px;
line-height:31px;
}
#sublinks ul li{
display:inline;
}
#sublinks ul li a,
#sublinks ul li a:visited {
padding:0 20px;
display:block;
text-decoration:none;
float:left;
color:#FFFFFF;
}
#sublinks ul li a:hover{
text-decoration:underline;
}
/* ----------- SUBMENU ----------- */
#s2, #s3{display:none;}

А вот если нужно код где мы хотим меню видеть!

<div id="top-navigation">
</div>
<div id="navigation">
<ul id="mymenu">
  <li><a href="#" onmouseover="javascript:showsubmenu(1)">Главная</a></li>
  <li><a href="#" onmouseover="javascript:showsubmenu(2)">Шаблоны</a></li>
  <li><a href="#" onmouseover="javascript:showsubmenu(3)">Скрипты</a></li>
  <li><a href="/forum">Форум</a></li>
</ul>
</div>
<div id="sublinks">
  <ul id="s1">
  <li><a href="#">Все для uCoz</a></li>
  <li><a href="#">Все для Joomla</a></li>
  <li><a href="#">Все для Cinema 4D</a></li>
  </ul>
  <ul id="s2">
  <li><a href="#">Joomla</a></li>
  <li><a href="#">uCoz</a></li>
  <li><a href="#">DLE</a></li>
  <li><a href="#">Wordpress</a></li>
  <li><a href="#">Ipes</a></li>

  </ul>
  <ul id="s3">
  <li><a href="#">wallaby9</a></li>
  <li><a href="#">wallaby10</a></li>
  <li><a href="#">wallaby11</a></li>
  </ul>
</div>
Anka_kuşu Дата: Воскресенье, 08.01.2012, 17:23 | Сообщение # 2
Студент(ка)
Награды: 6
Сообщений: 376
Репутация: 36
Статус: Offline
Вот здесь посмотри-меню

Я знаю только то, что я ничего не знаю, но некоторые не знают и этого.
KorniloFF Дата: Воскресенье, 08.01.2012, 17:39 | Сообщение # 3
Профессор(ша)
Награды: 27
Группа: Администраторы
Сообщений: 3514
Город: Ялта
Репутация: 251
Статус: Offline
КСС проблему не решить. Нужно делать несложный скрипт.
Хтмл нужно сменить на
Code
<div id="top-navigation" onmouseover="getElementById('sublinks').style.display='block'" onmouseout="getElementById('sublinks').style.display='' ">

<div id="navigation">
<ul id="mymenu">
  <li><a href="#" onmouseover="javascript:showsubmenu(1)">Главная</a></li>
     <li><a href="#" onmouseover="javascript:showsubmenu(2)">Шаблоны</a></li>
  <li><a href="#" onmouseover="javascript:showsubmenu(3)">Скрипты</a></li>
  <li><a href="/forum">Форум</a></li>
</ul>
</div>
<div id="sublinks">
  <ul style="display: block;" id="s1">
         <li><a href="#">Все для uCoz</a></li>
         <li><a href="#">Все для Joomla</a></li>
         <li><a href="#">Все для Cinema 4D</a></li>
     </ul>
     <ul style="display: none;" id="s2">
         <li><a href="#">Joomla</a></li>
         <li><a href="#">uCoz</a></li>
         <li><a href="#">DLE</a></li>
         <li><a href="#">Wordpress</a></li>
         <li><a href="#">Ipes</a></li>

     </ul>
     <ul style="display: none;" id="s3">
         <li><a href="#">wallaby9</a></li>
         <li><a href="#">wallaby10</a></li>
         <li><a href="#">wallaby11</a></li>
     </ul>
</div>
</div>




Z146965124780
R374477004237
Ну, или хотя бы добавьте в репутацию.
Yasuro Дата: Воскресенье, 08.01.2012, 18:53 | Сообщение # 4
Третьеклашка
Группа: Пользователи
Сообщений: 21
Город: Нижний Новгород
Репутация: 0
Статус: Offline
Скрипт не работает, или я что то не понимаю,! Все надписи просто раскиданы по верхней части сайта!
Мне не именно как там слово в слово, нужно так что бы при наведение курсора на вкладку выпадало второе(нижнее) меню!
Вкладку можно только одну!
А css без изменения оставить?
KorniloFF Дата: Воскресенье, 08.01.2012, 18:56 | Сообщение # 5
Профессор(ша)
Награды: 27
Группа: Администраторы
Сообщений: 3514
Город: Ялта
Репутация: 251
Статус: Offline
Yasuro, адрес страницы с проблемой, мне нужно видеть. Поставь сайт в профиль.



Z146965124780
R374477004237
Ну, или хотя бы добавьте в репутацию.
Yasuro Дата: Воскресенье, 08.01.2012, 19:00 | Сообщение # 6
Третьеклашка
Группа: Пользователи
Сообщений: 21
Город: Нижний Новгород
Репутация: 0
Статус: Offline
http://game-file.my1.ru/
Мне нужно чтобы при наведении на вкладку жанры открвалась второе подменю горизонтально только, а не вертикальное как у меня сейчас!


KorniloFF Дата: Воскресенье, 08.01.2012, 19:06 | Сообщение # 7
Профессор(ша)
Награды: 27
Группа: Администраторы
Сообщений: 3514
Город: Ялта
Репутация: 251
Статус: Offline
Yasuro, а ты видишь разницу между твоим кодом
Code
<div class="menu_ihtut_net">
  <div id="menu_ihtut_net">
  <a href="/">главная</a>  
  <a href="/blog">жрналы</a>
  <a href="/publ">видео</a>
  <a href="/load/mody_i_patchi/14">моды и патчи</a>
   
   
   
<ul id="cssmenu">
   
  <li><a href="http://pohudey-ka.ucoz.ru/publ/13">Жанры</a>
  <ul>
  <li><a href="/load/ehkshen/2">Экшены</a></li>
  <li><a href="/load/simuljatory/3">Симуляторы</a></li>
  <li><a href="/load/shutery/5">Шутеры</a></li>
  <li><a href="/load/gonki/6">Гонки</a></li>
  <li><a href="/load/sport/10">Спортивные</a></li>
  <li><a href="/load/rpg/7">ММОRpg</a></li>
  <li><a href="/load/kvest/8">Квест</a></li>
  <li><a href="/load/arkady/9">Аркады</a></li>  
  <li><a href="/load/rpg/12"> Rpg</a>
  </li></ul>
  </li>  
  </ul>
   
  </div>
</div>

И тем, что я привел здесь?

Сделай в точности, а КСС потом подгоним.
Адреса ссылкок и их количество менять можно, имена классов и идентификаторов - нет!




Z146965124780
R374477004237
Ну, или хотя бы добавьте в репутацию.
KorniloFF Дата: Воскресенье, 08.01.2012, 19:09 | Сообщение # 8
Профессор(ша)
Награды: 27
Группа: Администраторы
Сообщений: 3514
Город: Ялта
Репутация: 251
Статус: Offline
Code
<li><a href="...">Главная</a></li>

Так должен выглядеть каждый пункт меню




Z146965124780
R374477004237
Ну, или хотя бы добавьте в репутацию.
Yasuro Дата: Воскресенье, 08.01.2012, 19:25 | Сообщение # 9
Третьеклашка
Группа: Пользователи
Сообщений: 21
Город: Нижний Новгород
Репутация: 0
Статус: Offline
Блин, фуигня какая то получается,!
Так должно получится?

<div class="menu_ihtut_net">
<div id="menu_ihtut_net">
<li><a href="/">главная</a></li>
<li> <a href="/blog">жрналы</a></li>
<li><a href="/publ">видео</a></li>
<li> <a href="/load/mody_i_patchi/14">моды и патчи</a></li>



<ul id="cssmenu" onmouseover="getElementById('sublinks').style.display='block'" onmouseout="getElementById('sublinks').style.display='' ">

<div id="navigation">
<ul id="mymenu">

<li><a href="."onmouseover="javascript:showsubmenu(1)" >Жанры</a>
</ul>
</div>
<div id="sublinks">
<ul style="display: block;" id="s1">
<ul>
<li><a href="/load/ehkshen/2">Экшены</a></li>
<li><a href="/load/simuljatory/3">Симуляторы</a></li>
<li><a href="/load/shutery/5">Шутеры</a></li>
<li><a href="/load/gonki/6">Гонки</a></li>
<li><a href="/load/sport/10">Спортивные</a></li>
<li><a href="/load/rpg/7">ММОRpg</a></li>
<li><a href="/load/kvest/8">Квест</a></li>
<li><a href="/load/arkady/9">Аркады</a></li>
<li><a href="/load/rpg/12"> Rpg</a>
</ul>

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

</ul>


</div>
</div>
</div>
KorniloFF Дата: Воскресенье, 08.01.2012, 19:30 | Сообщение # 10
Профессор(ша)
Награды: 27
Группа: Администраторы
Сообщений: 3514
Город: Ялта
Репутация: 251
Статус: Offline
Yasuro, блин, не поленился, сделал полный код со стилями.
Code
<style type="text/css" media="screen">
   ul, li {
   border:0;
   padding:0;
   margin:0;
   list-style:none
}
#navigation {
   background:url(http://woork.bravehost.com/pastelmenu/img/nav-bg.gif) repeat-x;
   height:64px;
   position:relative
}
#navigation ul li {
   line-height:32px;
   display:inline
}
#navigation ul li a, #navigation ul li a:visited {
   background:url(http://woork.bravehost.com/pastelmenu/img/line-a.gif) right no-repeat;
   padding:0 20px;
   text-decoration:none;
   color:#4261df;
   font-weight:bold
}
#navigation ul li ul {
   position:absolute;
   left:0;
   top:32px;
   height:30px;
   width:100%;
   background:#888 url(http://woork.bravehost.com/pastelmenu/img/sublink.gif);
   font-size:11px
}
#navigation ul li li {
   height:30px;
   line-height:30px
}
#navigation ul li li a, #navigation ul li li a:visited {
   padding:0 20px;
   display:block;
   float:left;
   color:#fff
}
#navigation ul li li a:hover {
   text-decoration:underline
}
#s2, #s3 {
   display:none
}
#sublinks {
      background: url("img/sublink.gif") repeat scroll 0 0 #888888;
      font-size: 11px;
      height: 30px;
      margin: 0 auto;
      width: auto;
}
#sublinks li {float:left; margin: 0 10px;}
</style>

<div id="top-navigation" onmouseover="getElementById('sublinks').style.display='block'" onmouseout="getElementById('sublinks').style.display='none' ">

<div id="navigation">
<ul id="mymenu">
    <li><a href="#" onmouseover="javascript:showsubmenu(1)">Главная</a></li>
       <li><a href="#" onmouseover="javascript:showsubmenu(2)">Шаблоны</a></li>
    <li><a href="#" onmouseover="javascript:showsubmenu(3)">Скрипты</a></li>
    <li><a href="/forum">Форум</a></li>
</ul>
</div>
<div id="sublinks" style="display:none;">
    <ul style="display: block;" id="s1">
           <li><a href="#">Все для uCoz</a></li>
           <li><a href="#">Все для Joomla</a></li>
           <li><a href="#">Все для Cinema 4D</a></li>
       </ul>
       <ul style="display: none;" id="s2">
           <li><a href="#">Joomla</a></li>
           <li><a href="#">uCoz</a></li>
           <li><a href="#">DLE</a></li>
           <li><a href="#">Wordpress</a></li>
           <li><a href="#">Ipes</a></li>
       </ul>
       <ul style="display: none;" id="s3">
           <li><a href="#">wallaby9</a></li>
           <li><a href="#">wallaby10</a></li>
           <li><a href="#">wallaby11</a></li>
       </ul>
</div>
</div>

<script type="text/javascript">
   function showsubmenu(id)
   {
    submenu = document.getElementById('s'+id);
    for(i=1;i<=3;i++)
    { if(i==id)
      { submenu.style.display="block";   
      } else
      { document.getElementById('s'+i).style.display="none"; }
    }
}
</script>

Скопируй для начала в текстовый редактор, сохрани с расширением .htm и посмотри как работает!
===================
Даже файл тебе сделал, только сохрани и запусти броузером! (Во вложениях лежит)
Прикрепления: ___.htm(2.6 Kb)




Z146965124780
R374477004237
Ну, или хотя бы добавьте в репутацию.


Сообщение отредактировал KorniloFF - Воскресенье, 08.01.2012, 19:32


Форум » Создание сайта » Ucoz » Динамическое 2-х уровневое горизонтальное меню редактирванье
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск:
Динамическое 2-х уровневое горизонтальное меню редактирванье - Создание сайта - Ucoz - Форум
Сегодня были на форуме:
marina785f, Kis, tatyanka_lapteva_2017, aalinarinaa, ivernadskaya, marinaholubnychaya, Валя-Кравец, slavenno, amaksimova500, Quyrrkana, timur_smeshnoy, taraszezera, vasisa, razboyniks, ivan_prohorov470, yulyasavinskaya92

Конструктор кнопок он-лайн


Получить код CSS

Подбор цветов

Справочник по html и CSS

Наши копирайтеры

Поиск