Замечательное раздвижное меню справа на jQuery


Замечательное раздвижное меню справа на jQuery

1780
7.6 из 10
Проголосовало: 9




  • Скачать с сервера
  • Скачать
  • Смотреть демо

Установка
После /head на страницах, где будет отображаться данное меню, вставляем:

Code
<style type="text/css">  
   
  /*Start slide out box*/  
  div.box_button {  
  height: 50px;  
  width: 50px;  
  text-align: center;  
  vertical-align: middle;  
  float: left;  
  cursor:help;  
  }  
  div.box_main {  
  height: auto;  
  background-color: #EEE;  
  float: left;  
  border-top-width: thin;  
  border-right-width: thin;  
  border-left-width: thin;  
  border-top-style: solid;  
  border-right-style: solid;  
  border-left-style: solid;  
  border-top-color: #4D4D4D;  
  border-right-color: #4D4D4D;  
  border-left-color: #4D4D4D;  
  }  
  div.box_wrap {  
  width: auto;  
  float: left;  
  clear: both;  
  height: auto;  
  position: absolute;  
  left: -1px;  
  top: 50px;  
  }  
  div.content {  
  padding: 10px;  
  font-size: 14px;  
  font-family: Arial, Helvetica, sans-serif;  
  }  
  /*End slide out box*/  
   
   
  /*Start drop down menu*/  
  ul#menu, ul#menu ul {  
  list-style-type:none;  
  margin: 0;  
  padding: 0;  
  width: 15em;  
  width: 300px;  
  }  
   
  ul#menu a {  
  display: block;  
  text-decoration: none;  
  }  
  #menu li a img {  
  margin-right: 5px;  
  }  
   
  ul#menu li {  
  width: 300px;  
  }  
   
  ul#menu li a {  
  color: #333;  
  background-color: #eeeeee;  
  font-family: Arial, Helvetica, sans-serif;  
  border-bottom-width: thin;  
  border-bottom-style: solid;  
  border-bottom-color: #333;  
  font-size: 36px;  
  padding-top: 5px;  
  padding-right: 5px;  
  padding-bottom: 5px;  
  padding-left: 5px;  
  }  
  /*End drop down menu*/  
   

  </style>  
  <script type="text/javascript">  
   
   
  $(document).ready(function() {  
  $(".box_main").hide();  
  $('#menu ul').hide();  
   
  $('#menu li a').click(function() {  
   
  $(this).next().slideToggle('normal');  
   
  });  
   
  $('#box_link').toggle(  
   
  function() {  
  $('.box_main').show( function() {  
  $('.box_main').animate({  
  width: '300'  
  }, 500);  
  });  
  $('#box_img').attr("src", "/images/close.png");  
   
  },  
  function() {  
  $('.box_main').animate({  
  width: "0"  
  }, 500, function() {  
  $('.box_main').hide();  
  $('#box_img').attr("src", "/images/qm.png");  
  });  
  });  
  });  
  </script>

Этот код вставляйте сразу после предыдущего:

Code
<div class="box_wrap">  
  <div class="box_main">  
  <ul id="menu">  
  <li>  
  <a href="#"><img src="/images/faq.png" width="32" height="32" border="0" /><span>FAQ</
span></a>  
   
  <ul>  
  <div class="content">  
   
   
<strong>Q</strong>. What is this?  
   
  <strong>A</strong>. A cool side bar for your website.</p>  
   
   
  <strong>Q</strong>. How does it work.  
   
  <strong>A</strong>. It uses CSS & jQeuery.</p>  
   
   
<strong>Q</strong>. Who made it?  
   
  <strong>A</strong>. Dave Earley did - <a style="font-size:16px; border:none;"  
href="#">Dave Earley.com</a>  
   
   
   
  </p>  
  </div>  
  </ul>  
  </li>  
   
  <li>  
  <a href="#"><img src="/images/contact.png" width="32" height="32" border="0" />Contact  
Us</a>  
  <ul>  
  <div class="content"><form id="form1" name="form1" method="post" action="">  
  <label>  
  Name  
   
  <input type="text" name="textfield" id="textfield" />  
   
   
  Email  
   
   
  </label>  
  <label>  
  <input type="text" name="textfield2" id="textfield2" />  
   
   
  Message  
   
   
  <textarea name="textarea" id="textarea" cols="20" rows="3"></textarea>  
   
   
  </label>  
  <label>  
  <input type="submit" name="button" id="button" value="Submit" />  
  </label>  
  </form>  
  </div>  
  </ul>  
  <a href="#"><img src="/images/about.png" width="32" height="32" border="0" />About Us</
a>  
   
  <ul>  
  <div class="content">  
   
   
<strong>This is some about text.</strong></p>  
   
   
  This is some about text. This is some about text. This is some about text.  
  This is some about text. This is some about text.</p>  
   
   
  This is some about text. This is some about text.  
  This is some about text. This is some about text. This is some about text. This is some  
about text. </p>  
  </div>  
  </ul>  
  </li>  
   
  <li>  
  <a href="#"><img src="/images/links.png" width="32" height="32" border="0" />Useful  
Links</a>  
  <ul>  
  <li><a style="font-size:18px;" href="#">Yahoo!</a></li>  
  <li><a style="font-size:18px;" href="#">Google</a></li>  
  <li><a style="font-size:18px;" href="#">Ask.com</a></li>  
  <li><a style="font-size:18px;" href="#">Dave Earley's Blog</a></li>  
   
  </ul>  
  </li>  
  </ul>  
   
  </div>  
   
  <div class="box_button">  
  <a style="display:block;" href="#" id="box_link">  
  <img id="box_img" src="/images/qm.png" width="50" height="50" border="0" />  
  </a>  
  </div>  
  </div>  
  <div style="clear:both;"></div>

Осталось лишь залить картинки из прикреплённого архива в папку images

Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
  • Оставить первым комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    204
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 4
    Гостей: 4
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: