В данном уроке мы сделаем красивое меню-вкладки, которое существенно расширит функциональность любого сайта.
Опции
- duration: время в секундах, за которое меню полностью раскроется. Значение по умолчанию: 1.0
- transition: функция, которая отвечает за эффект появления меню. По умолчанию: Effect.Transitions.sinoidal. Также возможны варианты: Effect.Transitions.linear, Effect.Transitions.reverse, Effect.Transitions.wobble, Effect.Transitions.flicker
- callback: функция обратного вызова, которая будет обработана после окончания анимации. Она полезна для объединения анимаций.
Методы
- toggleMenu: включает вкладки. Необходима ссылка на необходимую вкладку.
В шапке документа, как всегда подключаем необходимые скрипты:
<script type='text/javascript' src='js/prototype.js'></script>
<script type='text/javascript' src='/js/scriptaculous.js?load=effects'></script>
<script type='text/javascript' src='js/e24tabmenu.js'></script>
<script type="text/javascript">
function initApp() {
oe24TabMenu = new e24TabMenu( 'menu', { mode: 'uppertabs', duration: 1.0, transition: Effect.Transitions.sinoidal } );
}
Event.observe(window, 'load', initApp, false);
</script>
Далее в теле документа создаем вкладки для меню и добавляем в них содержание.
<div id="menu" ><!---menu container-->
<div id="item_3d" class="menutarget">
Contenido
</div>
<div id="item_gall" class="menutarget">
Contenido
</div>
<div id="item_menu" class="menutarget">
Contenido
</div>
<div id="item_efec" class="menutarget">
Contenido
</div>
<!---tabs del menu-->
<a id="3d" href="#3d" rel="e24menuitem[item_3d]"><img src="img/3d.gif" alt="Efectos 3D" /></a>
<a id="gall" href="#galerias" rel="e24menuitem[item_gall]"><img src="img/galerias.gif" alt="Galeria de fotos AJAX" /></a>
<a id="menus" href="#menus" rel="e24menuitem[item_menu]" ><img src="img/menus.gif" alt="Efectos de Menus" /></a>
<a id="efec" href="#efectos" rel="e24menuitem[item_efec]"><img src="img/efectos.gif" alt="Otros efectos ajax" /></a>
<!---tabs del menu-->
<div id="maincontent">
Contenido principal
</div><!--texto-->
</div><!--menu container-->
Все это мы оформляем с помощью следующих CSS стилей (которые можно использовать в самом документе, или же вынести в отдельный файл):
<style type="text/css" media="screen">
html{
background: url(img/bg.jpg);
border: 0px;
margin: 0;
padding: 0;
}
body{
border: 0px;
margin: 0;
padding: 0;
}
#page {
margin: 0px auto;
width: 800px;
}
#menu {
position: relative;
height: 500px;
margin-left: 5px;
}
.gallery{
margin: 30px auto;
width: 80%;
padding-top: 10px;
}
.menuitem{
background: #afec77;
}
.menutarget{
background-color:#afec77;
display: none;
border-bottom: 5px solid white;
border-left: 5px solid white;
border-right: 5px solid white;
}
img{
border:0px;
}
</style>
Мне нравится результат! а Вам?
P.S. также есть возможность сделать так, чтобы любая вкладка при загрузке уже была открытой. Для этого достаточно добавить следующий код после "oe24TabMenu = new e24TabMenu( 'menu', { mode: 'uppertabs', duration: 1.0, transition: Effect.Transitions.sinoidal } );" на новой строке
oe24TabMenu.toggleMenu($('3d'));
В данном примере '3d' это название вкладки. И это значение можно менять.