Jump to content
  • 0
Sign in to follow this  
Mogorash

Эффект подобный раздвижной панели только через маленькую кнопку

Question

Mogorash    3

Всем привет. Ребят надо сделать что то подобное раздвижной панели шириной скажем 1000 px, только при этом кнопка должна быть небольшой скажем 200х40 px. То есть при нажатии на небольшую кнопку раздвигается весь сайт по горизонтали. С раздвижной панелью получается почти то что надо, только кнопка при этом громадная, что не есть гуд(

Буду благодарен за любую помощь!

Share this post


Link to post

3 answers to this question

Recommended Posts

  • 0

Ну это просто. Нарисуйте кнопку, подходящего размера сделайте ее фоном для вкладки в раздвижной панели. Саму вкладку сделайте прозрачной. Тогда будет видна только маленькая кнопка, при нажатии на которую будет происходит то что нужно. Кстати в новой версии Adobe Muse, наконец то можно делать резиновую раздвижную панель. Что просто отлично!

Share this post


Link to post

Новая статья

Как бесплатно получить специализированный хостинг для Adobe Muse сайта. Читайте новую инструкцию по этой ссылке.
  • 0
Mogorash    3

я пробовал этот вариант, но при такой реализации кнопкой становиться много белого пространства, которое идёт горизонтальной полосой через весь сайт( и чтобы сделать анимацию к кнопке (при наведении) надо делать 2 пнг файла, кнопок необходимо много и выйдет вес не малый

Share this post


Link to post
  • 0
xaus    1
можно сделать так
в head запили это
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $('.splLink').click(function(){ $(this).parent().children('div.splCont').toggle('normal'); return false; }); }); </script>

потом в head но уже в стили вот это  

<style type="text/css">.splCont{display:none; padding:3px 5px;}</style>

ну и в то место куда тебе надо сделать такой слайдер вот это  

<a href="javscript://" class="splLink"><img src="здесь свой путь к картинке кнопки любых размеров" alt="" /></a> <div class="splCont"> наполнение спойлера то что ты хочешь увидеть в раскрывающемся поле </div>

вот и все

ну а дальше как выровнить кнопку и тд по мелочам думаю разберешься

Share this post


Link to post
Sign in to follow this  

×
×
  • Create New...