نمایش نسخه قابل چاپ
سلام دوستان
داخل سایت https://www.google.com/intl/en/chrome/browser/ منوهای بالا یه نوار آبی زیر منو ها هست که وقتی موس را میبرم روش میاد بالا و وقتی که موس را خارج میکنم ازش اون نوار آروم میره پایین
کسی میدونه چطور ساخته شده؟
با انیمیشن انجام دادم اما به نتیجه دلخواهم نرسیدم
ممنون میشم راهنمایی کنید:53:
Up ...
سلام با jquery و css3 میشه همچین چیزی ساخت من خیلی سریع کد زدم خودتون وقت بگذارید چیزه قشنگی میتونید دربیارید .
کد:<html>
<head>
<title>Chrome</title>
<style>
.page {
width: 800px;
margin: 40px auto;
height: 300px;
font-family: 'Segoe UI';
text-align: center;
}
a {
text-decoration: none;
color: #333;
display: inline-block;
line-height: 40px;
}
li {
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;
}
li:hover {
border-bottom: 3px solid #3d92fa;
}
li.s a {
border-bottom: 3px solid #3d92fa;
}
ul {
border-bottom: 1px solid #ccc;
margin: 100px auto;
padding: 0;
}
</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 () {
$index = getIndex();
$("li").hover(function () {
$("li").each(function () {
$(this).removeClass('s');
});
}
,
function () {
$("li").each(function () {
if ($(this).index() == $index)
$(this).addClass('s');
});
}
);
function getIndex() {
return $("li.s").index()
}
});
</script>
</head>
<body>
<div class="page">
<ul>
<li class="s">
<a href="#">BROWSER</a>
</li>
<li>
<a href="#">DEVICES</a>
</li>
<li>
<a href="#">WEB STORE</a>
</li>
</ul>
</div>
</body>
</html>
با سلام و خسته نباشید خدمت شما
من کدی که دوست عزیز m-esm زحمت کشیده بودند نوشته بودند رو ویرایش کردم و تقریبا مشابه کامل از صفحه ای که فرمودین رو ساختم :سعی کردم از استایل خود گوگل استفاده کنم که کاملا مشابه بشه...کد:<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>
اگرم خواستی تغییرش بدی خیلی راحته، یه نیگا به کد بندازی کاملا متوجه میشی...
سوالی بود در خدمتم...
موفق و پیروز باشید