سوال درمورد jqyery

**~~bax998~~** · July 20th, 2013, 23:38

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

**~~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>

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

موضوع: سوال درمورد jqyery

ابزارهای موضوع

نحوه نمایش موضوع

سوال درمورد jqyery

پاسخ : سوال درمورد jqyery

پاسخ : سوال درمورد jqyery

تعداد تشکر ها از m-esm به دلیل پست مفید

پاسخ : سوال درمورد jqyery

تعداد تشکر ها از PayamResun.Ir به دلیل پست مفید

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

موضوعات مشابه

سوال در مورد آپگرید به نسخه 6 و سوال در مورد پنل پیامک آی پی پنل

سوء استفاده افراد سودجو از این تاپیک

Express سوئد , فروش فوق العاده سرور مجازی از سوئد ! فول کانفیگ و فول ساپورت ! کیفیت واقعی را با ما تجربه کنید

سوال و راهنمایی در مورد دیتاسنتر Equinix سوئیس

مجوز های ارسال و ویرایش