BorislawBotew
Banned
Значи опитвам се да направя една навигация по урок от тук
Проверих всичко ми е вярно и точно..предполагам, но нищо не се получава.Просто се изкарва Листа със стил от CSS-а и до там.Ето го кода на цялата страница:
Проверих всичко ми е вярно и точно..предполагам, но нищо не се получава.Просто се изкарва Листа със стил от CSS-а и до там.Ето го кода на цялата страница:
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.8.2.custom.min.js"></script>
<style type="text/css">
ul {margin: 300px 300px;}
li img { width: 25px; height: 25px; display:block; float: left; margin: 7px 15px 0 px 5px;}
li {list-style:none; width:40px; height:40px;background:#EEF; margin-right:15px; border: 1px dashed thistle; display:block; float: left;}
li a {display:none; text-decoration:none;}
</style>
<script type="text/javascript">
$(function() {
$('li').hover(function() {
var li_obj = $(this);
var li_width = parseInt(li_obj.css('width'));
var a_width = parseInt(li_obj.find('a').css('width'));
li_obj.animate({'width' : li_width + a_width + 25), 300, function() {
li_obj.find('a').fadeIn('200');
});
}, function() {
var li_obj = $(this);
li_obj.find('a').fadeOut('200', function() {
li_obj.animate({'width' : '40px'}, 400);
});
});
});
</script>
</head>
<body>
<ul>
<li>
<img src="http://image.com/image.png" />
<a href="javascript: void()">Заглавие<br />Описание</a>
</li>
<li>
<img src="http://image.com/image.png" />
<a href="javascript: void()">Заглавие<br />Описание</a>
</li>
<li>
<img src="http://image.com/image.png" />
<a href="javascript: void()"> Заглавие<br />Описание</a>
</li>
</ul>
</body>
</html>
