| CatinTheBread |
06.06.2013 14:46 |
Кнопки. Скрытые блоки
Всем джамбо. Есть страничка с кнопками... http://osobniak.com/дизайн-интерьеров
Кнопки стоят вертикально и контент открывается соответственно блоком под каждой кнопкой. Хотелось бы сделать все по симпатичнее. Например кнопки горизонтально, и при нажатии открывался блок с контентом на всю ширину страницы или кнопки вертикально с лева, а контент открывался с права...
Или может кто знает как это сделать вообще не прибегая к использованию кнопок?!?
Если есть идеи буду признателен! Вот код кнопок.
Код:
<!-- Lightbox Plus ColorBox v2.6/1.3.32 - 2013.01.24 - Message: 0--><script type="text/javascript">
function onclick(event) {
console.log("text1");
var txt = event.target.innerText;
if (txt == "Современные интерьеры")
{
jQuery("#ToggleRestavration").slideToggle("slow");
}
else if (txt == "Классические интерьеры")
{
jQuery("#ToggleBaton").slideToggle("slow");
}
else if (txt == "Интерьеры для офиса")
{
jQuery("#ToggleElseBaton").slideToggle("slow");
}
else if (txt == "Интерьеры для ресторана")
{
jQuery("#TogglePestapan").slideToggle("slow");
}
};
jQuery(document).ready(function($){
$("a[rel*=lightbox]").colorbox({speed:0,width:false,height:false,innerWidth:false,innerHeight:false,initialWidth:false,initialHeight:false,maxWidth:false,maxHeight:false,scalePhotos:false,opacity:0,preloading:false,current:" {current} {total}",previous:"",next:"",close:"",overlayClose:false,loop:false,scrolling:false,escKey:false,arrowKey:false,top:false,right:false,bottom:false,left:false});
$("button").each(function(item) {
$(this).click(onclick);
});
});
</script>
<style>
.but_lavender {
margin: 10px 0px 0px 0px;
text-decoration: none !important;
color: #333;
font: 100% Arial, Helvetica, sans-serif;
padding: 5px 13px;
font-size: 13px;
border: solid 1px #aaa;
border-color: #99958c;
background: #c0c0c0;
background: -moz-linear-gradient(top, #f7f0fe 0%, #e8d1ff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f0fe), color-stop(100%,#e8d1ff));
background: -webkit-linear-gradient(top, #f7f0fe 0%,#e8d1ff 100%);
background: -o-linear-gradient(top, #f7f0fe 0%,#e8d1ff 100%);
background: -ms-linear-gradient(top, #f7f0fe 0%,#e8d1ff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f0fe', endColorstr='#e8d1ff',GradientType=0 );
background: linear-gradient(top, #f7f0fe 0%,#e8d1ff 100%);
vertical-align: middle;
display: inline-block;
zoom:1;
*display:inline;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.3);
-moz-box-shadow: 0 1px 0 rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 1px 0 rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.3);
}
.but_lavender:hover {
text-decoration: none;
background: #d0f0c0;
}
.but_lavender:active {
position: relative;
top: 1px;
}
</style>
|
