Как вам меню?

[kak2z]

Ну собственно нашел тут пример в инете.. и сделал для пробы на тестовом форуме http://djaf.ru
Как считаете такое меню заслуживает на жизнь?

П.С. правда что бы вставить меню в хидер пришлось мод поставить) Global-Headers-and-Footers а то не получилось руками всунуть код кнопок... если кому то кнопки нужны то вот код и две картинки во вложении

<div class="animatedtabs">
<ul>
<li><a href="http://www.dynamicdrive.com" title="Home"><span>Home</span></a></li>
<li class="selected"><a href="http://www.dynamicdrive.com/style/" title="CSS Examples"><span>CSS</span></a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" title="New"><span>New</span></a></li>
<li><a href="http://www.dynamicdrive.com/revised.htm" title="Revised"><span>Revised</span></a></li>
<li><a href="http://tools.dynamicdrive.com" title="Tools"><span>Tools</span></a></li>   
<li><a href="http://www.dynamicdrive.com/forums/" title="DHTML Forums"><span>Forums</span></a></li>
</ul>
</div>



<style type="text/css">
   
.animatedtabs{
border-bottom: 0px solid gray;
overflow: hidden;
width: 100%;
font-size: 14px; /*font of menu text*/
}


.animatedtabs ul{
list-style-type: none;
margin: 0;
margin-left: 100px; /*offset of first tab relative to page left edge*/
padding: 0;
}

.animatedtabs li{
float: left;
margin: 0;
padding: 0;
}

.animatedtabs a{
float: left;
position: relative;
top: 5px; /* 1) Number of pixels to protrude up for selected tab. Should equal (3) MINUS (2) below */
background: url(http://localhost/smf222/2/media/tab-blue-left.gif) no-repeat left top;
margin: 0;
margin-right: 3px; /*Spacing between each tab*/
padding: 0 0 0 9px;
text-decoration: none;

}

.animatedtabs a span{
float: left;
position: relative;
display: block;
background: url(http://localhost/smf222/2/media/tab-blue-right.gif) no-repeat right top;
padding: 5px 14px 3px 5px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */
font-weight: bold;
color: black;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
.animatedtabs a span {float:none;}
/* End IE5-Mac hack */


.animatedtabs .selected a{
background-position: 0 -125px;
top: 0;
}

.animatedtabs .selected a span{
background-position: 100% -125px;
color: black;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}

.animatedtabs a:hover{
background-position: 0% -125px;
top: 0;
}

.animatedtabs a:hover span{
background-position: 100% -125px;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}

</style>

[Serifa]

Вот такое бы меню, но не вверху, а сбоку? Справа или слева. У форума же все равно есть отступы по краям.

[kak2z]

Вот такое бы меню, но не вверху, а сбоку? Справа или слева. У форума же все равно есть отступы по краям.

хм... а вот это офигенная идея... спасибо)) пошел искать боковое меню)) только вот вставить его я не вставлю сам вбок)

нашел очень интересное боковое меню вот демо http://tympanus.net/Tutorials/FixedNavigationTutorial/
а вот исходники http://tympanus.net/codrops/2009/11/30/beautiful-slide-out-navigation-a-css-and-jquery-tutorial/
а вот демо на моем сайте) ) http://djaf.ru

[r2017]

Лучше горизонтальная плавающая панель. Там не только выпадающее меню можно разместить, но и много другого (оповещения о новых ЛС, форма поиска).

А меню ничего, да.)

[kak2z]

я плавающую нашел но потом решил что лучше без java обойтись, одним CSS - поэтому поставил попроще

[Mr. Anviss]

Панель на java это круто. Вот жаль только что java не у всех стоит по умолчанию.

[kak2z]

Панель на java это круто. Вот жаль только что java не у всех стоит по умолчанию.

я эту менюшку установил http://kak2z.ru/index.php там без Явы)

[r2017]

Панель на java это круто. Вот жаль только что java не у всех стоит по умолчанию.

Наверное, всё же подразумевался JS.)

[kak2z]

я честно говоря не спец ни по JS ни по Java но вот как выглядит код меню... там вроде скриптов вообще нет..

Код Выделить Развернуть

<div id="header-wrap111">
  <div id="header111">

    <ul class="menu111">
     
      <!-- Begin Simple Item Without Drop -->
      <li class="">
      <a href="http://kak2z.ru/index.php?action=forum">Все разделы</a>
      </li>
      <!-- End Simple Item Without Drop -->

      <!-- Begin Simple Item Without Drop -->
      <li class="">
      <a href="http://kak2z.ru/index.php?topic=25238.0">Кинотеатр</a>
      </li>
      <!-- End Simple Item Without Drop -->
 
     
      <!-- Begin Item With Drop -->
      <li class="drop">
      <span style="padding:0px 0px;">
      <a href="http://kak2z.ru">   Дом 2   </a>
      </span>
     
      <!-- Begin Toggle Icon -->
      <span class="toggle"> </span>
      <!-- End Toggle Icon -->
     
      <!-- Begin Sub-Menu -->
        <ul>
          <li><a href="http://kak2z.ru/index.php?board=1.0">Новости</a></li>
          <li><a href="http://kak2z.ru/index.php?board=20.0">Слухи</a></li>
          <li><a href="http://kak2z.ru/index.php?board=21.0">Онлайн</a></li>
          <li><a href="http://kak2z.ru/index.php?board=11.0">Около Дома 2</a></li>
          <li><a href="http://kak2z.ru/index.php?board=24.0">Блоги героев</a></li>
          <li><a href="http://kak2z.ru/index.php?board=7.0">Участники</a></li>
  </ul>
        <!-- End Sub-Menu -->
       
      </li>
      <!-- End Item With Drop -->
     
      <li class="drop">
      <a href="http://kak2z.ru/index.php?board=102.0">Каникулы в Мексике</a>
      <span class="toggle"> </span>
        <ul>
          <li><a href="http://kak2z.ru/index.php?board=103.0">Каникулы в Мексике 1</a></li>
          <li><a href="http://kak2z.ru/index.php?board=104.0">Каникулы в Мексике 2</a></li>
          <li><a href="http://kak2z.ru/index.php?board=105.0">Каникулы в Мексике 3</a></li>  
        </ul>
      </li>
 
 
 
 
 
 
    </ul>
  </div>
</div>


<style type="text/css">
html, body {
margin:0;
padding:0;
height:100%;

}
a {
-moz-outline:none;
color:#36c;
}
a img {
border:0;
}
a:hover {
text-decoration:none;
}
a:active {
outline:none;
}

#header-wrap111 {
display:block;
position:relative;
width:100%;
margin:0 auto;
padding:0;
text-align:left;

}


#header111 {
height: 40px;
padding:0;
position:relative;
margin:0 auto;
display:block;
}


/*  ------------------------------  */
/*  DROPDOWN MENU                   */
/*  ------------------------------  */
ul.menu111 {
list-style-type:none;
margin:0;
padding:6px 0 0 6px;
float: right;
}
ul.menu111 li {
display:block;
height: 30px;
float:left;
position:relative;
margin:0 9px 0 0;
padding:0;
-khtml-opacity: 0.75;      /* khtml, old safari */
-moz-opacity: 0.75;       /* mozilla, netscape */
opacity: 0.75;           /* fx, safari, opera */
}
ul.menu111 li.current {
background:#000000;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
ul.menu111 li:hover {
background:#000000;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}


ul.menu111 li a {
display:block;
float:left;
color:#fff;
text-decoration:none;
font-size:15px;
font-style:normal;
font-weight:bold;
font-family:arial, helvetica, sans-serif;
padding:6px 15px 5px 15px;
line-height:18px;
}

ul.menu111 li a span {
font-weight:normal;
padding-left:3px;
}
ul.menu111 li.drop a {
padding-right:7px;
}
ul.menu111 li.drop:hover li {
border:none;
}
ul.menu111 li.drop span.toggle {
display:block;
float:left;
width:21px;
height:26px;
background:transparent url("pic/toggle.png") no-repeat 0 -20px;
padding:0;
margin:0 7px 0 0;
}
ul.menu111 li.drop:hover span.toggle, ul.menu111 li.drop.current span.toggle {
background-position:1px 5px;
}
ul.menu111 li.drop:hover, ul.menu111 li.current:hover {
-moz-border-radius:0;
-webkit-border-radius:0;
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-left-radius:4px;
-webkit-border-top-right-radius:4px;
}
ul.menu111 li.drop:hover ul {
display:block;
z-index:1;
padding-bottom:8px;
}
ul.menu111 li ul {
display:none;
position:absolute;
width: 100%;
top:30px;
left:0;
list-style-type:none;
margin:0;
padding:9px 0 0 0;
background:#000000;
filter: alpha(opacity=75); /* internet explorer */
}
ul.menu111 li ul li {
float:none;
height: auto;
margin:0;
padding:0;
border:none;
filter: alpha(opacity=100); /* internet explorer */
}
ul.menu111 li ul li a {
float:none;
background:none;
margin:0;
padding:0;
display:block;
font-size:13px;
height:auto;
margin:0;
padding:4px 13px 4px 13px;
font-weight:normal;
}

/* drop down menu hover styles */
ul.menu111 li:hover ul {
border:none;
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-left-radius:4px;
-webkit-border-bottom-right-radius:4px;
}
ul.menu111 li:hover ul * {
background:none;
-moz-border-radius:0;
-webkit-border-radius:0;
}
ul.menu111 li ul li:hover {
background-color:#333333;
}


</style>

[Serifa]

я честно говоря не спец ни по JS ни по Java но вот как выглядит код меню... там вроде скриптов вообще нет.

Забыл рассказать, как установить. Мне надо все два раза повторять)
Симпатичное очень. Хочу. А главное - мне подойдет, а то у меня верх шаблона не отображается, я ведь его запретила в коде.

[kak2z]

Приветик)) Установил мод Global-Headers-and-Footers - что бы не лезть в код... этот мод позволяет что то добавлять в хедер и футер... а потом просто вставил этот код http://www.simplemachines.ru/index.php?topic=15134.msg118038#msg118038 в хедер через мод.. и все...
никаких скриптов больше нет... никакого лазания в код)) 

[Serifa]

И вот это: <style type="text/css">
тоже добавлять туда же? Или правильнее куда-то в индекс цсс? В логах ошибок ничего не появляется?


РS.
Проверила код в Ad Management Mod. На главной странице портала ничего нет, а вот на форуме всё прекрасно отображается, но сам форум резко уезжает влево. Сейчас еще куда-нибудь засуну, проверить.

[kak2z]

И вот это: <style type="text/css">
тоже добавлять туда же? Или правильнее куда-то в индекс цсс? В логах ошибок ничего не появляется?

мне так легче показалось)) и проще)) ошибок нет)

[GeorG]

Проверила код в Ad Management Mod

Стили надо засовывать в заголовок, между тегами head. Данный мод рекламы, размещает код только в body.

На главной странице портала ничего нет, а вот на форуме всё прекрасно отображается, но сам форум резко уезжает влево

Отметьте опцию - "показывать на всех страницах ...".
Лучше установите мод Global-Headers-and-Footers, как и сказал Кактус, мод позволяет вставлять код в заголовок форума.

[AstaLaVista]

Товарищи, помогите тоже прикрутить вот это меню: http://infohousework.ru/369-menyu-vydvigaetsya-sboku.html
Делаю так: вот этот код

Код Выделить Развернуть


/* Стили навигации на CSS. */
ul#cssnavigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 30px;
left: 0px;
list-style: none;
z-index:9999;
}
ul#cssnavigation li {
width: 100px;
}
ul#cssnavigation li a {
display: block;
margin-left: -85px;
width: 100px;
height: 70px;
background-color:#FBEAB3;
background-repeat:no-repeat;
background-position:center center;
border:1px solid #444444;
-moz-border-radius:0px 10px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-top-right-radius: 10px;
-o-border-bottom-right-radius: 10px;
-o-border-top-right-radius: 10px;
border-radius:0px 10px 10px 0px;
opacity: 0.6;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
ul#cssnavigation li a:hover{
-webkit-transform: translate(75px, 0);
-moz-transform: translate(75px, 0);
-o-transform: translate(75px, 0);
transform: translate(75px, 0);
}
ul#cssnavigation .home a{
background-image: url(../images/home.png);
}
ul#cssnavigation .about a      {
background-image: url(../images/id_card.png);
}
ul#cssnavigation .search a      {
background-image: url(../images/search.png);
}
ul#cssnavigation .podcasts a      {
background-image: url(../images/ipod.png);
}
ul#cssnavigation .rssfeed a   {
    background-image: url(../images/rss.png);
}
ul#cssnavigation .photos a     {
    background-image: url(../images/camera.png);
}
ul#cssnavigation .contact a    {
    background-image: url(../images/mail.png);
}

вставляю в index.css своей темы оформления.
А вот этот код,

Код Выделить Развернуть


<ul id="cssnavigation">
<li class="home"><a title="Home"></a></li>
<li class="about"><a title="About"></a></li>
<li class="search"><a title="Search"></a></li>
<li class="photos"><a title="Photos"></a></li>
<li class="rssfeed"><a title="Rss Feed"></a></li>
<li class="podcasts"><a title="Podcasts"></a></li>
<li class="contact"><a title="Contact"></a></li>
</ul>

как мне кажется, нужно вставлять в index.template.php
Но помогите найти место, а то куда не вставлю - всегда "Template Parse Error!"