jQuery MagicLine Navigasi

Posted by : ra Kamis, 06 November 2014

Menu ini gaya "geser" navigasi telah sekitar sementara waktu, saya hanya berpikir saya akan mengambil celah di melakukannya sendiri sebagai kesempatan datang baru-baru ini. Ternyata itu benar-benar pretty darnmudah. Saya menempatkan dua contoh bersama-sama untuk itu.

Ide
Idenya adalah untuk memiliki sorot dari beberapa jenis (latar belakang atau garis bawah) mengikuti Anda di sekitar saat Anda mengarahkan mouse ke link yang berbeda dalam navigasi. Ini akan terjadi dengan jQuerydan kemampuan animasi itu. Dengan demikian, "garis ajaib" hanya akan ditambahkan melalui JavaScript.Setelah ditambahkan ke dalam daftar dan ditata, karena Anda mengarahkan mouse ke link yang berbeda, itu angka posisi kiri dan lebar dan menjiwai untuk mencocokkan.

HTML
Khas daftar di sini .... Ini memiliki "kelompok" kelas karena itu akan menjadi sebuah baris horisontal dan perluclearfix sehingga memiliki tinggi. ID adalah untuk JavaScript menargetkannya.

<div class="nav-wrap">
 <ul class="group" id="example-one">
    <li class="current_page_item"><a href="#">Home</a></li>
    <li><a href="#">Buy Tickets</a></li>
    <li><a href="#">Group Sales</a></li>
    <li><a href="#">Reviews</a></li>
    <li><a href="#">The Show</a></li>
    <li><a href="#">Videos</a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#">Magic Shop</a></li>
 </ul>
</div>

Perhatikan nav-wrap div. Sekitarnya. Yang digunakan karena styling, bar pergi lebar layar penuh, tetapi navigasi ini berpusat di dalam. Ini centering membawa masalah ketika kita mulai JavaScript tersebut. CSS

CSS
Apakah elemen daftar inline ol 'dengan jangkar melayang kiri untuk mendapatkan horisontal daftar dan menghindari stairstepping. Garis sihir benar-benar diposisikan di bawah bar, sehingga tidak menyebabkan jitter (mouse di atas link, menjiwai atas, mouse sekarang pada baris sihir tidak link, menjiwai kembali, dll) Segala sesuatu yang lain adalah murni gaya.

.nav-wrap { margin: 50px auto;  background-color: rgba(0,0,0,0.6); border-top: 2px solid white; border-bottom: 2px solid white; }
#example-one { margin: 0 auto; list-style: none; position: relative; width: 960px; }
#example-one li { display: inline; }
#example-one li a { color: #bbb; font-size: 14px; display: block; float: left; padding: 6px 10px 4px 10px; text-decoration: none; text-transform: uppercase; }
#example-one li a:hover { color: white; }
#magic-line { position: absolute; bottom: -2px; left: 0; width: 100px; height: 2px; background: #fe4902; }

jQuery JavaScript

Ketika DOM siap ...
Mengatur variabel termasuk kiri saat offset navigasi
Mengatur fungsi resize pada jendela untuk me-reset yang offset harus itu berubah (karena centering)
Tambahkan baris sihir untuk nav tersebut
Mengatur posisi dan lebar garis ajaib untuk item halaman saat ini
Juga mengatur lebar asli dan posisi sebagai data, sehingga dapat digunakan untuk menghidupkankembali
Di hover, menghitung lebar baru dan posisi kiri baru dan bernyawa itu
Di balik hover (keluar mouse), menghidupkan kembali ke aslinya

$(function() {

    var $el, leftPos, newWidth,
        $mainNav = $("#example-one");
    
    $mainNav.append("<li id='magic-line'></li>");
    var $magicLine = $("#magic-line");
    
    $magicLine
        .width($(".current_page_item").width())
        .css("left", $(".current_page_item a").position().left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());
        
    $("#example-one li a").hover(function() {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();
        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        });
    }, function() {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });    
    });
});

isu
Opera aneh tentang hal itu. Itu membuat lebar asli dari garis ajaib lebar penuh nav bar dan mempersingkat itudari tepat di melayang. Saya belum bisa mengetahuinya. Jika Anda melakukannya, mengagumkan, biarkan aku tahu aku akan update artikel ini dan demo.
alternatif Versi

Periksa link demo di bawah ini untuk versi alternatif yang menggunakan latar belakang bukan garis, dan warnamenjiwai serta posisi dan lebar. Pada dasarnya sama, kecuali CSS yang sedikit berbeda dan menarikJavaScript warna item daftar baru dari atribut rel di HTML.

Warna animasi di jQuery memerlukan plugin warna. Saya hanya mengeluh tentang bagaimana tidak bekerjadengan warna RGBA, dan seseorang mengirimi saya sebuah patch yang melakukan, yang termasuk dalamdownload. Aku benar-benar minta maaf, tapi saya tidak ingat nama mereka! Bicaralah jika itu kau dan akuakan memperbarui dan kredit patch untuk Anda.
semua Hormat

Seperti biasa, merasa bebas untuk melakukan apapun yang Anda inginkan dengan itu. Sebaiknya, gunakandalam proyek-proyek perusahaan dan mendapatkan gerobak uang tunai.