|
 |
| |
ทำไม เวลาเราย่อหน้า Browser แล้วเมนูมันเป็นแบบนี้ครับ... รวกวนดูให้หน่อยคับ |
| |
 |
|
|
 |
 |
|
index.html
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<style type="text/css">
#container {
width: 1200px;
margin: 100px auto;
}
ul, li {
margin: 0; padding: 0;
}
#blob {
border-right: 1px solid #0059ec;
border-left: 1px solid #0059ec;
position: absolute;
top: 0;
z-index : 1;
background: #0b2b61;
background: -moz-linear-gradient(top, #0b2b61, #1153c0);
background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 2px 3px 10px #011331;
-webkit-box-shadow: 2px 3px 10px #011331;
}
#nav {
position: relative;
background: #292929;
float: left;
}
#nav li {
float: left;
list-style: none;
border-right: 1px solid #4a4a4a;
border-left: 1px solid black;
}
#nav li a {
color: #e3e3e3;
position: relative;
z-index: 2;
float: left;
font-size: 30px;
font-family: helvetica, arial, sans-serif;
text-decoration: none;
padding: 30px 45px;
}
</style>
</head>
<body>
<div id="container">
<ul id="nav">
<li id="selected"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">More About My Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<script type="text/javascript" src="jquery.spasticNav.js"></script>
<script type="text/javascript">
$('#nav').spasticNav();
</script>
</body>
</html>
jquery.spasticNav.js
(function($) {
$.fn.spasticNav = function(options) {
options = $.extend({
overlap : 20,
speed : 500,
reset : 1500,
color : '#0b2b61',
easing : 'easeOutExpo'
}, options);
return this.each(function() {
var nav = $(this),
currentPageItem = $('#selected', nav),
blob,
reset;
$('<li id="blob"></li>').css({
width : currentPageItem.outerWidth(),
height : currentPageItem.outerHeight() + options.overlap,
left : currentPageItem.position().left,
top : currentPageItem.position().top - options.overlap / 2,
backgroundColor : options.color
}).appendTo(this);
blob = $('#blob', nav);
$('li:not(#blob)', nav).hover(function() {
// mouse over
clearTimeout(reset);
blob.animate(
{
left : $(this).position().left,
width : $(this).width()
},
{
duration : options.speed,
easing : options.easing,
queue : false
}
);
}, function() {
// mouse out
reset = setTimeout(function() {
blob.animate({
width : currentPageItem.outerWidth(),
left : currentPageItem.position().left
}, options.speed)
}, options.reset);
});
}); // end each
};
})(jQuery);
ลองเปรียนเทรียบ css ของคุณกับ ที่ผมโพสไว้นะครับ ว่าอะไรหายไป.. ^^
|
 |
 |
 |
 |
| Date :
2012-10-17 01:38:57 |
By :
pokultra |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
|
| |
|
|
| |
| Date :
2012-10-18 12:19:50 |
By :
chak.jakkree |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
Bootstrap
|
| |
|
|
| |
| Date :
2012-10-18 14:39:37 |
By :
Krungsri |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 05
|
