کد:
<html>
<head>
<title>Chrome</title>
<style>
.nav{
font-family: 'Segoe UI';
width: 400px;
height: 43px;
display: block;
text-align: center;
border-bottom: 1px solid #ccc;
margin: 100px auto;
padding: 0;
}
.menu{
display: inline-block;
width: 100px;
}
a {
text-decoration: none;
color: #333;
display: inline-block;
line-height: 40px;
}
span {
line-height: 40px;
width: 130px;
list-style: none;
display: inline-block;
-moz-transition: all ease-in-out 0.2s;
-o-transition: all ease-in-out 0.2s;
-webkit-transition: all ease-in-out 0.2s;
transition: all ease-in-out 0.2s;
}
span.h {
border-bottom: 3px solid #3d92fa;
}
span.s a {
border-bottom: 3px solid #3d92fa;
}
ul {
display: none;
width: 130px;
margin-top: 1px;
position: relative;
top: 0px;
left:-40px;
}
li {
background: none repeat scroll 0% 0% rgb(244, 244, 244);
border-bottom: 1px solid rgb(232, 232, 232);
border-top: 1px solid rgb(255, 255, 255);
display: inline-block;
height: 31px;
float: left;
width: 100%;
line-height: 31px;
margin: 0px;
padding: 0px;
text-align: center;
text-transform: none;
}
li a{
line-height: 31px;
text-align: center;
text-transform: none;
color: rgb(102, 102, 102);
border: medium none;
}
li:hover{
background: none repeat scroll 0% 0% rgb(221, 221, 221);
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function () {
$id = getId();
function getId() {
return $("span.s").attr("id");
}
$(".menu").hover(function () {
$(this).children("span").addClass('h');
$(this).children("ul").show();
$("span").each(function () {
if ($(this).attr("id") == $id)
$(this).removeClass('s');
});
}
,
function () {
$(this).children("span").removeClass('h');
$(this).children("ul").hide();
$("span").each(function () {
if ($(this).attr("id") == $id)
$(this).addClass('s');
});
}
);
});
</script>
</head>
<body>
<div class="nav">
<div class="menu">
<span id="browser" class="s">
<a href="#">Browser</a>
</span>
<ul>
<li><a href="#">Download</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Mobile</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Support</a></li>
</ul>
</div>
<div class="menu">
<span>
<a href="#">Devices</a>
</span>
<ul>
<li><a href="#">Features</a></li>
<li><a href="#">Chromebook</a></li>
<li><a href="#">Chromebox</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Buy online</a></li>
<li><a href="#">Buy in store</a></li>
</ul>
</div>
<div class="menu">
<span>
<a href="#">Web Store</a>
</span>
<ul>
<li><a href="#">Features</a></li>
<li><a href="#">Apps</a></li>
<li><a href="#">Extensions</a></li>
<li><a href="#">Themes</a></li>
<li><a href="#">Support</a></li>
</ul>
</div>
</div>
</body>
</html>
پاسخ : سوال درمورد jqyery
پاسخ با نقل قول