سوال درمورد jqyery [بایگانی] - انجمن تخصصی وب هاستینگ ایران

bax998

July 20th, 2013, 23:38

سلام دوستان
داخل سایت https://www.google.com/intl/en/chrome/browser/ منوهای بالا یه نوار آبی زیر منو ها هست که وقتی موس را میبرم روش میاد بالا و وقتی که موس را خارج میکنم ازش اون نوار آروم میره پایین
کسی میدونه چطور ساخته شده؟
با انیمیشن انجام دادم اما به نتیجه دلخواهم نرسیدم
ممنون میشم راهنمایی کنید:53:

bax998

July 21st, 2013, 01:44

Up ...

m-esm

July 21st, 2013, 10:42

سلام با 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>

PayamResun.Ir

July 21st, 2013, 13:54

با سلام و خسته نباشید خدمت شما
من کدی که دوست عزیز 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>

سعی کردم از استایل خود گوگل استفاده کنم که کاملا مشابه بشه...
اگرم خواستی تغییرش بدی خیلی راحته، یه نیگا به کد بندازی کاملا متوجه میشی...
سوالی بود در خدمتم...
موفق و پیروز باشید