Выдвигающееся боковое меню

Выдвигающееся боковое меню слева

Главная Контакты Софт Термины Неисправности Поисковики Шаблоны

>>>

В этой панели вы можете помещать любой контент,ссылки,фото.
Меню
Меню1
Меню2

Просмотр скрипта

</style>	 
<style>
#panel {
    position: fixed;
    top: 150px; 
    left: 0; 
    background: blue; 
    width: 30px; 
    height: 50px; 
    font: 14px Arial; 
    color: #ffff55; 
    text-align: center; 
    padding: 5px; 
    -webkit-transition-duration: 0.3s; 
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-border-radius: 0 5px 5px 0; 
    -moz-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
    }
#hidden_panel {
    position: fixed; 
    top: 150px; 
    left: -220px; 
    background: wheat; 
    color: #000; 
    width: 200px; 
    height: 250px; 
    padding: 10px; 
    text-align: left;

-webkit-transition-duration: 0.3s; 
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;

-webkit-border-radius: 0 5px 5px 0; 
    -moz-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
    }

#panel:hover {
    left: 220px; 
}
#panel:hover #hidden_panel {
    left: 0; /* отступ слева */
}
</style>		
</head>
<body>
 <center><h2>Выдвигающееся боковое меню слева</h2> </center><br>
<div id="mainMenu">
      <a href="../index.html">Главная</a>
       <a href="../gostevaia1.html">Контакты</a>
      <a href="../kprogramm.html">Софт</a>
      <a href="../termin.html">Термины</a>
      <a href="../nepoladka.html">Неисправности</a>
      <a href="../poisk.html">Поисковики</a>
      <a href="../chablon site.html">Шаблоны</a>
    </div>
  <table Border=0 CellSpacing=0 CellPadding=10 Width="%" Align="left" vAlign="top">
 <tr>
  <td vAlign="top">
  <div id="panel"> >>>
    <div id="hidden_panel">
	В этой панели вы можете помещать любой контент,ссылки,фото.<br>
	<a href="#">Меню</a><br>
    <a href="#">Меню1</a><br> 
    <a href="#">Меню2</a><br><br>
<img src="../Image/10c-1.jpg" border="0" width="100" height="90"/> </li>	
    </div>
</div>
<br><br><br><br><br><br><br>
<center><b>Просмотр скрипта</b></center>
<script language="JavaScript" src="../../c_small.js"></script>

Пример создания сайта
Размещение сайта в Интернете
Раскрутка сайта в Интернете
Заработок в Интернете
Visual Basic 6.0 с примерами
VBScript
Руководство по C++
JavaScript
Анимация в формате GIF
Вставка видео SWF в сайт.
Пиктограмма сайта (favicon)

Некоторые ссылки в меню примеров задействованы и ведут на другие ресурсы этого сайта.

Оригинальные меню

Анимированный текст

Календари и часы

Эффектная графика

Дополнительные окна

Таблицы

Таблица с закругленными уголками

Калькуляторы

Кнопки

Разное