Добро пожаловать в студию графики и веб-дизайна Art-Color
 
 

Добро пожаловать на StudioAC.ru. Наша дизайн студия занимается разработкой web сайтов, созданием дизайнов сайта.Так как большенство людей не умеют, или не имеют возможности рисовать профессиональную графику, мы делаем это за них.Графика для сайтов - это создание баннеров, создание шапки и остально мелочи которая нужна что бы ваш сайт был привлекательным и запомнился посетителю. На нашем сайте так же имеется форум дизайнеров. Где каждый человек может сделать заказ той или иной графики и в кротчайшие сроки она будет выполнена профессиональной командой дизайнеров. Наш дизайн форум пользуется популярностью как среди новичков так и профессиональных дизайнеров. Для отдыха от работы, имеется развлекательный форум где вы сможете развеятся немного.


 

 
[ Авторизация · Новые сообщения · Участники · Правила форума · Поиск · RSS · ]
  • Страница 1 из 1
  • 1
Модератор форума: Grigor  
Выпадающее меню на Ajax
Vov@Дата: Понедельник, 25.10.2010, 22:23 | Сообщение # 1
Сообщений: 215

Code
<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>

Далее в теле документа создаем вкладки для меню и добавляем в них содержание.

Code
<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 стилей (которые можно использовать в самом документе, или же вынести в отдельный файл):

Code
<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>

скачать здесь js и картинки

  • Страница 1 из 1
  • 1
Поиск:

Статистика Форума
Последние темы Читаемые темы Лучшие пользователи Новые пользователи

графика для сайтов | создание баннеров | создание шапки

Дизайн, файлы, идеи © 2010-2011 www.studioac.ru
Статьи ЗАПРЕЩАЕТСЯ копировать дизайн, его элементы, и контент.
Авторизация

Партнеры