Выпадающая менюшка на яве

Wir2al.ru · 02.01.2010, 03:07

PHP код:


			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="ru" xmlns="http://www.w3.org/1999/xhtml" lang="ru"><head>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="Сайтовик.com" />
<meta name="generator" content="saitovik.com" />
<title>Сайтовик.com - Главная</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/fancyzoom.min.js"></script>
<script type="text/javascript" src="js/fancyzoom.js" charset="utf-8"></script>
<script>
$(document).ready(function(){
    $(".Yo").click(function () {
      $(".Wow").slideToggle("slow");
    });
});
</script>
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="yo.css" type="text/css">
</head>
<body>
<div class="Yo">
  <img src="http://web-silver.ru/forum/images/yo.jpg" style="position:absolute; right:-66px; top:287px; background:url(images/body-bg.jpg) bottom left no-repeat;" />
<div class="Wow"><div style="position:absolute; right:21px; top:600px; "><img src="http://web-silver.ru/forum/images/wow.jpg" style="position:absolute; right:-237px; top:-312px;" /></div></div></div>
<div id="header">
    <div id="headerimg">
      <img src="http://web-silver.ru/forum/images/logo.png" style="margin-top:40px; "/>
      <div id="menu-bar"> 
           <ul>
               <li class="pagenav-home"><ul><li><a href="index.php">Главная</a></li></ul></li>
              <li class="pagenav-home"><ul><li><a href="services.php">Услуги</a></li></ul></li>
              <li class="pagenav-home"><ul><li><a href="portfolio.php">Портфолио</a></li></ul></li>
              <li class="pagenav-home"><ul><li><a href="order.php">Заказать</a></li></ul></li>
              <li class="pagenav-home"><ul><li><a href="contact.php">Контакты</a></li></ul></li>
        </ul>
      </div> 
   </div>    
</div>

<div id="page">
<div id="page-top"></div>
 <div id="page-body">
    <div id="content" class="narrowcolumn"></div>
    <div id="sidebar"></div>
<div style="clear: both;"></div>
</div>
<div id="footer">
  <div id="footer-bot"></div>
</div>
</div>
<div id="page-bottom"></div>
</body>
</html>

Добавлено через 16 секунд

Скрипт подключен, 100%.

Добавлено через 3 минуты

Если заместо картинки вставляю текст - все работает отлично, плавно.

Добавлено через 3 минуты

style.css :

Код:

body { margin: 0px auto; padding: 0px; background: rgb(255, 78, 0) url('images/body-bg.jpg') no-repeat scroll center top; font-size: 12px; font-family: Verdana,Arial,Georgia,Helvetica,sans-serif; color: rgb(102, 102, 102); width: 770px; position: relative; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; }
#body_wrap {  }
#page { margin: 0pt auto; text-align: left; background-color: rgb(255, 255, 255); }
#page-top { background: transparent url('images/page-top-bg.jpg') no-repeat scroll center bottom; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; }
#page-body { background-color: rgb(255, 255, 255); }
#content { background: transparent url(images/'vertical-line.jpg') repeat-y scroll right top; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; line-height: 1.4em; }
#sidebar { background-color: rgb(255, 255, 255); }
#footer { border: medium none ; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 9px; }
#footer a { color: rgb(255, 51, 0); }
h2, h3 { font-family: Arial,Verdana,Sans-Serif,'Georgia','Lucida Grande'; font-weight: normal; }
h1 { font-family: Arial,Verdana,Sans-Serif,'Georgia','Lucida Grande'; font-size: 36px; text-align: left; font-weight: normal; }
#header #headerimg .description { font-family: Verdana,'Lucida Grande',Arial,Sans-Serif; font-size: 12px; text-align: left; color: rgb(51, 102, 0); padding-left: 18px; height: 121px; }
h2 { font-size: 20px; }
#sidebar h2 { margin: 0pt; padding: 0px 10px 0px 0px; background: transparent url('images/sidebar-h2-bg.gif') repeat-x scroll left bottom; font-family: Arial,Verdana,Sans-Serif,'Georgia','Lucida Grande'; font-size: 20px; width: 210px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; color: rgb(0, 153, 204); }
h1, h1 a, h1 a:hover, h1 a:visited { text-decoration: none; color: rgb(255, 255, 255); }
h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited { color: rgb(102, 204, 0); }
h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite { text-decoration: none; }
#sidebar { background: rgb(255, 255, 255) none repeat scroll 0% 0%; font-family: Verdana,Arial,Georgia,Helvetica,sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 11px; font-size-adjust: none; font-stretch: normal; -x-system-font: none; line-height: 18px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; }
small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote, strike { color: rgb(102, 102, 102); }
acronym, abbr, span.caps { font-size: 0.9em; letter-spacing: 0.07em; }
a, h2 a:hover, h3 a:hover { color: rgb(255, 51, 0); text-decoration: none; }
a:hover { color: rgb(255, 51, 0); text-decoration: underline; }
body { margin: 0pt auto; padding: 0pt; width: 770px; min-height: 600px; }
#body_wrap { margin: 0pt auto; padding: 0pt; }
#header { margin: 0pt auto; padding: 0pt; height: 270px; width: 770px; }
#page { margin: 0pt auto; padding: 10px 0pt 0pt; width: 770px; min-height: 500px; }
#page-body { margin: 0pt auto; width: 770px; min-height: 600px; }
#content { margin: 0px 15px 10px 18px; padding: 0pt; float: left; width: 498px; min-height: 300px; }
.narrowcolumn { margin: 0pt; padding: 0pt; }
#footer { margin: 0pt auto; padding: 0pt; background: rgb(255, 255, 255) none repeat scroll 0% 0%; width: 770px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; }
#footer p { margin: 0pt; padding-top: 10px; text-align: center; color: rgb(120, 120, 120); }
h1 { margin: 0pt; padding: 73px 0pt 0pt 18px; height: 50px; }
h2 { margin: 12px 0pt 10px; line-height: 30px; }
#sidebar ul, #sidebar ul ol { margin: 0px; padding: 0px; }
#sidebar ul li { list-style-type: none; list-style-image: none; margin-bottom: 10px; }
#sidebar ul ul, #sidebar ul ol { margin: 5px 0pt 0pt 3px; }
#sidebar ul ul li, #sidebar ul ol li { margin: 0px 10px 0pt 25px; padding: 0pt; list-style-type: disc; color: rgb(102, 102, 102); }
#sidebar ul ul li a { color: rgb(255, 51, 0); }
#searchform { margin: 0pt; padding: 0pt; width: 230px; height: 30px; }
#sidebar #searchsubmit { padding: 1px; }
#sidebar { margin: 0pt; padding: 0pt; float: left; width: 228px; min-height: 430px; }
#sidebar1 { float: left; width: 228px; min-height: 100px; }
#sidebar form { margin: 0pt; }
acronym, abbr, span.caps { cursor: help; }
acronym, abbr { border-bottom: 1px dashed rgb(153, 153, 153); }
#menu-bar { margin-top: 75px; padding: 0pt 0pt 0pt 14px; float: left; width: 700px; line-height: 26px; height: 29px; font-size: 10px; }
#menu-bar ul { margin: 0pt; padding: 0pt; }
.pagenav-home { margin: 0pt; padding: 0pt; width: 98px; height: 29px; list-style-type: none; display: inline; }
.pagenav ul, .pagenav-home ul { margin: 0pt; padding: 0pt; list-style-type: none; float: left; }
.pagenav ul li a, .pagenav-home ul li a { background: rgb(255, 255, 255) url('images/pagemenu-inactive-bg.jpg') repeat-x scroll center top; width: 98px; float: left; margin-left: 2px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; color: rgb(255, 255, 255); text-decoration: none; text-align: center; text-transform: uppercase; font-weight: bold; }
.pagenav ul li a:hover, .pagenav-home ul li a:hover { background: rgb(255, 255, 255) url('images/pagemenu-active-bg.jpg') repeat-x scroll center top; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; color: rgb(222, 84, 0); }
#footer-top { margin: 0pt auto; width: 770px; height: 9px; }
#footer-bot { margin: 0pt auto; width: 770px; height: 50px; text-align: center; }
#sidebar ul ul li { background: transparent url('images/bullet_blue.png') no-repeat scroll left center; list-style-type: none; padding-left: 15px; margin-left: 0px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; }
#page-bottom { margin: 0pt auto; background: rgb(255, 78, 0) url('images/page-bottom-bg.jpg') no-repeat scroll center top; height: 150px; width: 770px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; }
.Yo {cursor: pointer;}
.Wow {display: none;}
p { width:495px; }

yo.css :

Код:

body
{
background:
}

Niemans · 02.01.2010, 11:48

Так?

Wir2al.ru · 02.01.2010, 16:14

да! спасибо огромное!

Niemans · 02.01.2010, 16:17

Пожалуйста.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Менюшка	Denis	Графические работы	6	15.08.2010 12:36
Менюшка	WayF1nder	HTML, CSS, JavaScript	4	02.10.2007 11:28
Выпадающая картинка	Silent Rain	ASP, Perl, PHP и MySQL	3	29.12.2005 23:46
двигающаяся менюшка	mir	Технологии Flash	4	24.08.2005 11:25
Менюшка и панели Флэш-плеера	ВЛАСТЕЛИН	Технологии Flash	13	07.09.2003 00:33

02.01.2010, 16:14	#13
Wir2al.ru	да! спасибо огромное!

02.01.2010, 03:07
Ссылки

02.01.2010, 16:17	#14
Niemans	Пожалуйста.