Двухрядное меню

Спойлер:

Здравствуйте, У нас более 7 дней нет никаких новостей от автора темы. В связи с этим мы полагаем, что проблема больше не актуальна и закрываем тему. Если вы по-прежнему нуждаетесь в решении, откройте, пожалуйста, новую тему. С уважением, Forum2x2

Мурзик пишет:Доброго времени суток )

У меня такой вопрос: можно ли сделать меню не с одним рядом кликабельных кнопок ( которые обычно распологаются слева или справа ) а с двумя рядами слева и справа ?

Вот например у нас такое меню :

Спойлер:

кнопки у нас слева..
А можно ли сделать, чтобы были еще и справа точно также ?

Спойлер:

$(function(){
$("#tb2-button, #tb3-button, #tb4-button, #tb5-button").css({
opacity: 0.7
});
$("#page-but div.button").click(function(){
$clicked = $(this);
if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
$clicked.animate({
opacity: 1,
}, 60 );
var idToLoad = $clicked.attr("id").split('-');
$("#but-content").find("div.but:visible").fadeOut("fast", function(){
$(this).parent().find("#"+idToLoad[0]).fadeIn();
})
}
$clicked.siblings(".button").animate({
opacity: 0.7,
}, 60 );
});
});

Спойлер:

/* весь блок меню */
#page-but {
width: auto;
height: 320px;
background-color: #F5FFFA;
border: 2px solid #d4d6d5;
}

/* блок с кнопками */
#but-menu {
float:left;
width: 120px;
}

/* блок с содержимым страниц меню */
#but-content {
background-color: #F5FFFA;
margin-left: 150px;
height: 320px;
width: auto;
}

#tb1 a, #tb2 a, #tb3 a, #tb5 a{
color: #817575;
font-weight: bolder;
text-decoration: none;
}


/* все скрытые блоки после первого */
#tb2, #tb3, #tb4, #tb5 {
display: none;
}

/* кнопки */
#but-menu .button {
cursor: pointer;
width: 150px;
height: 50px;
line-height: 50px;
background-color:;
margin: 5px auto;
font-size: 11px;
text-align: center;
}

/* страницы меню */
div.but {
max-height: 300px;
overflow: hidden;
font-size: 11px;
}
/*Фон объявления*/
.obyava_a {
background-color: #FFF; /*цвет фона*/
}

Спойлер:

<div id="but-menu">
<div id="tb1-button" class="button"><img src="http://i52.fastpic.ru/big/2013/0119/f3/58925344b4e7faf0d04d30790e392ff3.png" alt="Первый" title="О форуме"></div>
<div id="tb2-button" class="button"><img src="http://i53.fastpic.ru/big/2013/0119/9d/0857ee1468332e35c25a4099e926ae9d.png" alt="Второй" title="Новости"></div>
<div id="tb3-button" class="button"><img src="http://i53.fastpic.ru/big/2013/0119/b4/c1358ae81143439d19cd4237b70362b4.png" alt="Третий" title="Миссии"></div>
<div id="tb4-button" class="button"><img src="http://i53.fastpic.ru/big/2013/0119/1b/c151d6f892a3840920954dba39cc411b.png" alt="Четвертый" title="Навигация"></div>
<div id="tb5-button" class="button"><img src="http://i51.fastpic.ru/big/2013/0119/fc/c43532cdf8ee3a8bcc4627070e1111fc.png" alt="Пятый" title="Разыскиваем"></div>
</div>

<div id="but-content">
<div id="tb1" class="but"></div>
</div>
<div id="tb2" class="but"></div>
<div id="tb3" class="but" ></div>
</div>
<div id="tb4" class="but"></div></div>
<div id="tb5" class="but"></div></div>
</div>

Мурзик пишет:тему не нашли..
Если вас инетересует код, тогда вот:

ява

Спойлер:

Спойлер:

$(function(){
$("#tb2-button, #tb3-button, #tb4-button, #tb5-button").css({
opacity: 0.7
});
$("#page-but div.button").click(function(){
$clicked = $(this);
if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
$clicked.animate({
opacity: 1,
}, 60 );
var idToLoad = $clicked.attr("id").split('-');
$("#but-content").find("div.but:visible").fadeOut("fast", function(){
$(this).parent().find("#"+idToLoad[0]).fadeIn();
})
}
$clicked.siblings(".button").animate({
opacity: 0.7,
}, 60 );
});
});

ЦСС

Спойлер:

/* весь блок меню */
#page-but {
width: auto;
height: 320px;
background-color: #F5FFFA;
border: 2px solid #d4d6d5;
}

/* блок с кнопками */
#but-menu {
float:left;
width: 120px;
}

/* блок с содержимым страниц меню */
#but-content {
background-color: #F5FFFA;
margin-left: 150px;
height: 320px;
width: auto;
}

#tb1 a, #tb2 a, #tb3 a, #tb5 a{
color: #817575;
font-weight: bolder;
text-decoration: none;
}


/* все скрытые блоки после первого */
#tb2, #tb3, #tb4, #tb5 {
display: none;
}

/* кнопки */
#but-menu .button {
cursor: pointer;
width: 150px;
height: 50px;
line-height: 50px;
background-color:;
margin: 5px auto;
font-size: 11px;
text-align: center;
}

/* страницы меню */
div.but {
max-height: 300px;
overflow: hidden;
font-size: 11px;
}
/*Фон объявления*/
.obyava_a {
background-color: #FFF; /*цвет фона*/
}

ПА/Оформление/Главная/Общая информация

Спойлер:

<div id="but-menu">
<div id="tb1-button" class="button"><img src="http://i52.fastpic.ru/big/2013/0119/f3/58925344b4e7faf0d04d30790e392ff3.png" alt="Первый" title="О форуме"></div>
<div id="tb2-button" class="button"><img src="http://i53.fastpic.ru/big/2013/0119/9d/0857ee1468332e35c25a4099e926ae9d.png" alt="Второй" title="Новости"></div>
<div id="tb3-button" class="button"><img src="http://i53.fastpic.ru/big/2013/0119/b4/c1358ae81143439d19cd4237b70362b4.png" alt="Третий" title="Миссии"></div>
<div id="tb4-button" class="button"><img src="http://i53.fastpic.ru/big/2013/0119/1b/c151d6f892a3840920954dba39cc411b.png" alt="Четвертый" title="Навигация"></div>
<div id="tb5-button" class="button"><img src="http://i51.fastpic.ru/big/2013/0119/fc/c43532cdf8ee3a8bcc4627070e1111fc.png" alt="Пятый" title="Разыскиваем"></div>
</div>

<div id="but-content">
<div id="tb1" class="but"></div>
</div>
<div id="tb2" class="but"></div>
<div id="tb3" class="but" ></div>
</div>
<div id="tb4" class="but"></div></div>
<div id="tb5" class="but"></div></div>
</div>

Мурзик пишет:Ну как там ?