jQuery MagicLine Navigasi

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 darn mudah. 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 jQuery dan 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 perlu clearfix 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 

1. Ketika DOM siap ...  
2. Mengatur variabel termasuk kiri saat offset navigasi
3. Mengatur fungsi resize pada jendela untuk me-reset yang offset harus itu berubah (karena centering)
4. Tambahkan baris sihir untuk nav tersebut  
5. Mengatur posisi dan lebar garis ajaib untuk item halaman saat ini
6. Juga mengatur lebar asli dan posisi sebagai data, sehingga dapat digunakan untuk menghidupkan kembali
7. Di hover, menghitung lebar baru dan posisi kiri baru dan bernyawa itu
8. 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 itu dari 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 warna menjiwai serta posisi dan lebar. Pada dasarnya sama, kecuali CSS yang sedikit berbeda dan menarik JavaScript warna item daftar baru dari atribut rel di HTML.

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

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

View Demo   Download Files

Baca Juga >> CARA MEMPERCEPAT LOADING BLOG