Кот

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Кот » Фишки и примочки » Dropdown menu - выпадающее меню на JQuery.


Dropdown menu - выпадающее меню на JQuery.

Сообщений 1 страница 4 из 4

1

Коды by all.
Первоисточник: whitepiar.ru
http://i.imgur.com/zre8I.jpg
HTML-верх:

Код:
<div style="position: absolute;
top: 325px;
left: 665px;
color:#1e1e14;
width:255px;
font-size:9px;">
  
      <style type="text/css"> /*Спойлер */
    .punbb .quote-box.spoiler-box{
border:#C6C6CF 1px solid;
    border-radius:5px;
    -webkit-border-radius:5px;
    -khtml-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;

    box-shadow: 0px 2px 4px #8E8E8E;
    -webkit-box-shadow: 0px 2px 4px #8E8E8E;
    -khtml-box-shadow: 0px 2px 4px #8E8E8E;
    -moz-box-shadow: 0px 2px 4px #8E8E8E;
    }
.post-content .spoiler-box > blockquote.visible { 
display: none;}.punbb .spoiler-box blockquote {
min-width: 100%!important;
 }
.post-content .spoiler-box span.hide{
 display:none;
}
</style>
      <script>
$(".post-box .quote-box.spoiler-box div[onclick*='toggleClass']").each(function() {
  $(this).html($(this).html().replace(/(.*)?\|(.*)?/img,'&lt;span class="visible">$1&lt;/span>&lt;span class="hide">$2&lt;/span>'))
});
$(".post-box .quote-box.spoiler-box div[onclick*='toggleClass']").click(function(){
  $(this).next('blockquote').toggle('Slow');
  $(this).find('span:eq(0),span:eq(1)').toggleClass('hide').toggleClass('visible');
 });
});
</script>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.js"></script>
<script type="text/javascript" src="http://cf.igraemroli.ru/files/0011/6d/4d/44458.js"></script>
<script type="text/javascript" src="http://cf.igraemroli.ru/files/0011/6d/4d/60211.js"></script>
<script type="text/javascript" src="http://cf.igraemroli.ru/files/0011/6d/4d/41587.js"></script>

<script type="text/javascript">
$(function(){
	
	$('#navigation_horiz').naviDropDown({
    dropDownWidth: '300px'
	});
	
	$('#navigation_vert').naviDropDown({
    dropDownWidth: '300px',
    orientation: 'vertical'
	});
});
</script>

<style type="text/css">
----------------------------------------------------- */
	/* navigation styles - BEGIN */ 
	
	/* style for horizontal nav */	
	#navigation_horiz {width:820px; clear:both; padding:0 0 0 0; margin:0 auto}
	#navigation_horiz  ul {height:50px; display:block}
	#navigation_horiz  ul li {display:block; float:left; width:100px; height:50px; background:#; margin:0 1px 0 0; position:relative}
	#navigation_horiz  ul li a.navlink {display:block; width:100px; height:30px; padding: 20px 0 0 0; text-align:center; color:#e2dfe3; text-decoration:none}
	#navigation_horiz .dropdown {position:absolute; padding:20px; border-bottom-right-radius:10px; border-bottom-left-radius:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-bottomleft:10px}
	
	/* style for vertical nav */	
	#navigation_vert {width:820px; clear:both; padding:0 0 0 0; margin:0 auto}
	#navigation_vert  ul {height:50px; display:block}
	#navigation_vert  ul li {display:block; width:200px; height:50px; background:#999; margin:0 0 1px 0; position:relative}
	#navigation_vert  ul li a.navlink {display:block; *display:inline-block; width:200px; height:30px; padding: 20px 0 0 0; text-align:center; color:#fff; text-decoration:none}
	#navigation_vert .dropdown {position:absolute; padding:20px; border-bottom-right-radius:10px; border-top-right-radius:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-topright:10px}
	
    /* style for each drop down - horizontal */
    #navigation_horiz ul li #dropdown_one {background:#130b09; color:#fff}
    #navigation_horiz ul li #dropdown_one a {color:red}
    #navigation_horiz ul li #dropdown_two {background:#130b09; color:#fff}
    #navigation_horiz ul li #dropdown_two a {color:black}
    #navigation_horiz ul li #dropdown_three {background:#130b09; color:#fff}	
    #navigation_horiz ul li #dropdown_three a {color:gray}
    
    /* style for each drop down - vertical */
    #navigation_vert ul li #dropdown_four {background:#333; color:#fff}
    #navigation_vert ul li #dropdown_four a {color:red}
    #navigation_vert ul li #dropdown_five {background:#666; color:#fff}
    #navigation_vert ul li #dropdown_five a {color:black}
    #navigation_vert ul li #dropdown_six {background:#777; color:#fff}	
    #navigation_vert ul li #dropdown_six a {color:orange}

	/* navigation styles - END */ 
	/* ----------------------------------------------------- */
	
</style>



<div style="position: absolute;
top: -325px;
left: -378px;
color:#fff;
width:310px;">
  <div id="navigation_horiz">
    <ul>
      <li>
        <a href="" class="navlink"><img src="http://uploads.ru/i/T/D/u/TDu4H.png" border="0" /></a>
        <div class="dropdown" id="dropdown_one" style="width: 300px; left: 0px; top: 50px; display: none">
          <p>
           1 ячейка
          </p>
        </div>
        <!-- .dropdown_menu -->
      </li>
      <li>
        <a href="" class="navlink"><img src="http://uploads.ru/i/m/P/y/mPy5f.png" border="0" /></a>
        <div class="dropdown" id="dropdown_two" style="width: 300px; left: 0px; top: 50px; display: none">
          
          <p>2 ячейка</p>
        </div>
        <!-- .dropdown_menu -->
      </li>
      <li>
        <a href="" class="navlink"><img src="http://uploads.ru/i/a/r/x/arx5p.png" border="0" /></a>
        <div class="dropdown" id="dropdown_two" style="width: 300px; left: 0px; top: 50px; display: none">
       <p>3 ячейка
</p>
      </div>
      <!-- .dropdown_menu -->
    </ul>
  </div>
</div>

0

2

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Отредактировано by all (2012-06-05 03:11:31)

0

3

_Ipnosi
если это адресовано мне, то данное сообщение я не вижу, я не администратор =)

0

4

by all
Прости, я просто подумала, что ты и сам откуда-то взял и автора не знаешь. :)
Как подписать авторство? Так:
Коды by all.
Первоисточник: whitepiar.ru

0


Вы здесь » Кот » Фишки и примочки » Dropdown menu - выпадающее меню на JQuery.


Рейтинг форумов | Создать форум бесплатно © 2007–2016 «QuadroSystems» LLC