2
Вы не авторизованы!
Присоединяйтесь к нашему сообществу :)
авторизация
Вакансии
На сайт требуется контент-менеджер
смотреть вакансии

Красивое меню на JavaScript для любого сайта

Скрипты меню 2011-Авг-09 proucoz 4.7k 2

Красивое меню для сайта, взятое из исходников сайта на блогспот. Меню плавно раздвигается при нажатии и обратно сворачивается при повторном нажатии, либо при нажатии на следующий пункт.

Установка: данный код ставим туда, где хотим видеть меню:

Code
<style type="text/css">  
   
   
/*!!!!!!!!!!! MyCSSMenu Core CSS [Do Not Modify!] !!!!!!!!!!!!!*/
.qmmc .qmdivider{display:block;font-size:1px;border-width:0px;border-style:solid;}.qmmc .qmdividery{float:left;width:0px;}.qmmc .qmtitle{display:block;cursor:default;white-space:nowrap;}.qmclear {font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;}.qmmc {position:relative;height:1%;}.qmmc a, .qmmc li {float:left;display:block;white-space:nowrap;}.qmmc div a, .qmmc ul a, .qmmc ul li {float:none;}.qmsh div a {float:left;}.qmmc div{visibility:hidden;position:absolute;}.qmmc ul {left:-10000px;position:absolute;}.qmmc, .qmmc ul {list-style:none;padding:0px;margin:0px;}.qmmc li a {float:none}.qmmc li{position:relative;}.qmmc ul {z-index:10;}.qmmc ul ul {z-index:20;}.qmmc ul ul ul {z-index:30;}.qmmc ul ul ul ul {z-index:40;}.qmmc ul ul ul ul ul {z-index:50;}li:hover>ul{left:auto;}#qm0 li {float:none;}#qm0 li:hover>ul{top:0px;left:100%;}#qm0 {width:200px;}
   
/*!!!!!!!!!!! MyCSSMenu Styles [Please Modify!] !!!!!!!!!!!*/
   
   
   
  /* MyCSSMenu 0 */
   
  /*"""""""" (MAIN) Container""""""""*/  
  #qm0  
  {  
  width:160px;
  background-color:transparent;
  border-width:1px 1px 0px 1px;
  border-style:solid;
  border-color:#AAAAAA;
  }
   
   
  /*"""""""" (MAIN) Items""""""""*/  
  #qm0 a  
  {  
  padding:5px 5px 5px 5px;
  background-color:#3B3A3A;
  color:#F5F6FA;
  font-family:Arial;
  font-size:14px;
  text-decoration:none;
  border-width:0px 0px 1px 0px;
  border-style:solid;
  border-color:#AAAAAA;
  }
   
   
  /*"""""""" (MAIN) Active State""""""""*/  
  body #qm0 .qmactive, body #qm0 .qmactive:hover  
  {  
  text-decoration:underline;
  }
   
   
  /*"""""""" (SUB) Container""""""""*/  
  #qm0 div, #qm0 ul  
  {  
  padding:5px 0px 5px 0px;
  background-color:#515050;
  border-width:1px;
  border-style:none;
  border-color:#CCCCCC;
  }
   
   
  /*"""""""" (SUB) Items""""""""*/  
  #qm0 div a, #qm0 ul a  
  {  
  padding:2px 0px 2px 5px;
  margin:0px 5px 0px 5px;
  background-color:transparent;
  background-image:none;
  border-style:none;
  }
   
   
  /*"""""""" (SUB) Hover State""""""""*/  
  #qm0 div a:hover, #qm0 ul a:hover  
  {  
  text-decoration:underline;
  }
   
   
  /*"""""""" (SUB) Active State""""""""*/  
  body #qm0 div .qmactive, body #qm0 div .qmactive:hover  
  {  
  background-color:#4F578D;
  }
   
   
</style><!-- Core MyCSSMenu Code -->  
<script type="text/javascript" src="http://www.mycssmenu.com/visual_interface/template19/qm.js"></script>  
<script type="text/javascript" src="http://www.mycssmenu.com/visual_interface/template19/qm_pure_css.js"></script>  
   
<!-- Add-On Core Code (Remove when not using any add-on's) -->  
<style type="text/css">.qmfv{visibility:visible !important;}.qmfh{visibility:hidden !important;}</style><script type="text/JavaScript">var qmad = new Object();qmad.bvis="";qmad.bhide="";qmad.bhover="";</script>  
   
   
  <!-- Add-On Settings -->  
  <script type="text/JavaScript">  
   
  /******* Menu 0 Add-On Settings *******/
  var a = qmad.qm0 = new Object();
   
  // Item Bullets (CSS - Imageless) Add On
  a.ibcss_apply_to = "parent";
  a.ibcss_main_type = "arrow";
  a.ibcss_main_direction = "down";
  a.ibcss_main_size = 5;
  a.ibcss_main_bg_color = "#bbbbbb";
  a.ibcss_main_bg_color_hover = "#ffffff";
  a.ibcss_main_bg_color_active = "#ffffff";
  a.ibcss_main_border_color_active = "#AE2323";
  a.ibcss_main_position_x = -16;
  a.ibcss_main_position_y = -5;
  a.ibcss_main_align_x = "right";
  a.ibcss_main_align_y = "middle";
  a.ibcss_sub_type = "arrow-v";
  a.ibcss_sub_direction = "down";
  a.ibcss_sub_size = 3;
  a.ibcss_sub_bg_color = "";
  a.ibcss_sub_bg_color_active = "";
  a.ibcss_sub_border_color = "#797979";
  a.ibcss_sub_border_color_hover = "#C72828";
  a.ibcss_sub_border_color_active = "#AE2323";
  a.ibcss_sub_position_x = -7;
  a.ibcss_sub_position_y = -4;
  a.ibcss_sub_align_x = "left";
  a.ibcss_sub_align_y = "middle";
   
  // Tree Menu Add On
  a.tree_enabled = true;
  a.tree_sub_sub_indent = 15;
  a.tree_hide_focus_box = true;
  a.tree_auto_collapse = true;
  a.tree_expand_animation = 2;
  a.tree_expand_step_size = 8;
  a.tree_collapse_animation = 3;
  a.tree_collapse_step_size = 15;
   
  </script>  
   
<!-- Add-On Code: Tree Menu -->  
<script type="text/javascript" src="http://www.mycssmenu.com/visual_interface/template19/qm_tree_menu.js"></script>  
   
<!-- Add-On Code: Item Bullets (CSS - Imageless) -->  
<script type="text/javascript" src="http://www.mycssmenu.com/visual_interface/template19/qm_item_bullets_css.js"></script>  
   
   
   
<noscript><span style="font-size:13px;font-family:arial;"><span style="color:#dd3300">Warning!</span>   MyCSSMenu may have been blocked by IE-SP2's active content option. This browser feature blocks JavaScript from running locally on your computer.

This warning will not display once the menu is on-line. To enable the menu locally, click the yellow bar above, and select <span style="color:#0033dd;">"Allow Blocked Content"</span>.

To permanently enable active content locally...<div style="padding:0px 0px 30px 10px;color:#0033dd;">
1: Select 'Tools' --> 'Internet Options' from the IE menu.
2: Click the 'Advanced' tab.
3: Check the 2nd option under 'Security' in the tree (Allow active content to run in files on my computer.)</div></span></noscript>  
   
   
   
<!-- MyCSSMenu Structure [Menu 0] -->  
<table>  
  <tr><td valign="top">  
<ul id="qm0" class="qmmc"><li><a class="qmparent" href="javascript:void(0)">News TV</a>

  <ul>
  <li><a href="http://tv-sv.blogspot.com/2009/05/bbc-news.html">BBC News</a></li>
  <li><a href="http://tv-sv.blogspot.com/2009/05/sky-news.html">Sky News</a></li>

  <li><a href="http://tv-sv.blogspot.com/2009/05/euronews.html">Euronews</a></li><li><a href="http://tv-sv.blogspot.com/2009/06/cnn-international.html">CNN</a></li><li><a href="http://tv-sv.blogspot.com/2009/05/bfm-tv.html">BFM TV</a></li><li><a href="http://tv-sv.blogspot.com/2009/05/vesti-24.html">Vesti 24</a></li><li><a href="http://tv-sv.blogspot.com/2009/05/dw-tv.html">DW-TV</a></li><li><a href="http://tv-sv.blogspot.com/2009/05/russia-today.html">Russia Today</a></li><li><a href="http://tv-sv.blogspot.com/2009/05/cctv-9.html">CCTV 9</a></li><li><a href="http://tv-sv.blogspot.com/2009/05/france24.html">France 24</a></li><li><a href="http://tv-sv.blogspot.com/2009/05/sky-tg-24.html">Sky TG 24</a></li><li><a href="http://tv-sv.blogspot.com/2009/06/tv-5.html">TV 5</a></li><li><a href="http://tv-sv.blogspot.com/2009/06/rai-news-24.html">Rai News 24</a></li>
  </ul></li>
   
   
   
  <li><a class="qmparent" href="javascript:void(0)">Music TV</a>

  <ul>
  <li><a href="http://tv-sv.blogspot.com/2009/04/105-music-tv.html">105 Music TV</a></li><li><a href="http://tv-sv.blogspot.com/2009/06/mtv-ru.html">MTV-ru</a></li><li><a href="http://tv-sv.blogspot.com/2009/06/mooz-hd.html">mooz hd</a></li>
   

  <li><a href="http://tv-sv.blogspot.com/2009/04/direct-star-music.html">Direct Star Music</a></li>
  <li><a href="http://tv-sv.blogspot.com/2009/04/italy-music-tv.html">Italy Music Tv</a></li>
  <li><a href="http://tv-sv.blogspot.com/2009/04/kiss-tv.html">KISS TV</a></li>
  <li><a href="http://tv-sv.blogspot.com/2009/04/nrj-pop-rock.html">NRJ Pop Rock</a></li><li><a href="http://tv-sv.blogspot.com/2009/11/ibiza-tv.html">Ibiza TV</a></li>
  <li><a href="http://tv-sv.blogspot.com/2009/04/party-music.html">Party Music</a></li><li><a href="http://tv-sv.blogspot.com/2009/04/rmc-tv.html">RMC TV</a></li><li><a href="http://tv-sv.blogspot.com/2009/04/top-40.html">Top 40</a></li><li><a href="http://tv-sv.blogspot.com/2009/04/jungle-tv.html">Jungle tv</a></li><li><a href="http://tv-sv.blogspot.com/2009/04/tmf-dance.html">TMF Dance</a></li><li><a href="http://tv-sv.blogspot.com/2009/04/viva.html">VIVA</a></li><li><a href="http://tv-sv.blogspot.com/2009/04/rouge-music.html">Rouge Music</a></li><li><a href="http://tv-sv.blogspot.com/2009/05/voice.html">The Voice</a></li><li><a href="http://tv-sv.blogspot.com/2009/05/top-music.html">Top Music</a></li><li><a href="http://tv-sv.blogspot.com/2009/05/hd-music.html">HD TV Music</a></li><li><a href="http://tv-sv.blogspot.com/2009/05/music-hit.html">Music Hit</a></li><li><a href="http://tv-sv.blogspot.com/2009/05/rock-television.html">Rock Television</a></li><li><a href="http://tv-sv.blogspot.com/2009/10/imusic1-rocks.html">iMusic1 ROCKS</a></li><li><a href="http://tv-sv.blogspot.com/2009/05/vh1.html">VH1</a></li><li><a href="http://tv-sv.blogspot.com/2009/05/nrj-dance.html">NRJ Dance</a></li><li><a href="http://tv-sv.blogspot.com/2009/05/music-box.html">Music Box</a></li><li><a href="http://tv-sv.blogspot.com/2009/05/play-tv.html">Play TV</a></li><li><a href="http://tv-sv.blogspot.com/2009/05/tuba-music-tv.html">Tuba Music TV</a></li><li><a href="http://tv-sv.blogspot.com/2009/05/bridge-tv.html">Bridge TV</a></li><li><a href="http://tv-sv.blogspot.com/2009/05/party-patrol.html">Party Patrol</a></li><li><a href="http://tv-sv.blogspot.com/2009/05/miami-tv-dj.html">Miami TV DJ</a></li><li><a href="http://tv-sv.blogspot.com/2009/05/dm-sat.html">DM SAT</a></li><li><a href="http://tv-sv.blogspot.com/2009/06/rtv-pink.html">RTV Pink</a></li></ul></li>  
  <li><a class="qmparent" href="javascript:void(0)">Sport TV</a>

  <ul>
  <li><a href="http://tv-sv.blogspot.com/2009/04/eurosport_24.html">Eurosport/Ro</a></li><li><a href="http://tv-sv.blogspot.com/2010/01/eurosportru.html" title="vlc">Eurosport/Ru</a></li><li><a href="http://tv-sv.blogspot.com/2009/06/eurosport-2.html">Eurosport 2</a></li>
   

  <li><a href="http://tv-sv.blogspot.com/2009/04/sky-sports-1.html">Sky Sport 1</a></li> <li><a href="http://tv-sv.blogspot.com/2009/04/dolce-sport.html">Dolce Sport</a></li><li><a href="http://tv-sv.blogspot.com/2009/06/dolce-sport-2.html">Dolce Sport 2</a></li><li><a href="http://tv-sv.blogspot.com/2009/06/sport-ro.html">Sport RO</a></li><li><a href="http://tv-sv.blogspot.com/2009/04/live-sports.html">Live Sports</a></li><li><a href="http://tv-sv.blogspot.com/2009/05/nova-sport.html">Nova Sport</a></li><li><a href="http://tv-sv.blogspot.com/2009/06/nova-sport-hd-cz.html">Nova Sport HD /Cz</a></li><li><a href="http://tv-sv.blogspot.com/2009/05/espn.html">ESPN</a></li><li><a href="http://tv-sv.blogspot.com/2009/05/super-tennis.html">Super Tennis</a></li><li><a href="http://tv-sv.blogspot.com/2009/06/ntv-spor.html">NTV SPOR</a></li><li><a href="http://tv-sv.blogspot.com/2009/06/trt-3.html">TRT 3</a></li><li><a href="http://tv-sv.blogspot.com/2009/06/sport-1-ru.html">Sport 1 /ru</a></li><li><a href="http://tv-sv.blogspot.com/2009/06/gsp-tvro.html">GSP TV/ro</a></li><li><a href="http://tv-sv.blogspot.com/2009/06/sport-tv-gr.html">Sport tv /gr</a></li><li><a href="http://tv-sv.blogspot.com/2009/06/viasat-sport-baltic.html">VIASAT SPORT</a></li>
  </ul></li>
   
   
<li class="qmclear"> </li>
</ul></td> <td valign="top">

</td> </tr></table>
<!-- Create Menu Settings: (Menu ID, Is Vertical, Show Timer, Hide Timer, On Click, Right to Left, Horizontal Subs, Flush Left) -->
<script type="text/javascript">qm_create(0,false,0,500,true,false,false,false);</script>
Источник: не указан
2 комментария
avatar
1
меню с блогспота
avatar
2
ой такая лажа
avatar