Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript can anybody help me about JQuery MagicLine Navigation to dropdown menu

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #31112

    can anybody help me ? i cant change the jQuery MagicLine Navigation to dropdown menu.. i dont have any clue anymore..

    #68395

    this is my code, can anybody fix it ?

    $(function(){

    var $el, leftPos, newWidth,
    $mainNav = $("#example-one"),
    $mainNav2 = $("#example-two");

    /*
    EXAMPLE ONE
    */
    $mainNav.append("
  • ");

    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());

    $("ul.group li").find("a").hover(function() {
    $("ul.group li:has(ul)");
    $("ul.group li ul").css('visibility', 'visible');
    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.parent().width();
    $magicLine.stop().animate({
    left: leftPos,
    width: newWidth,
    });
    }, function() {
    $("ul.group li:has(ul)"),
    $("ul.group li ul")).css('visibility', 'hidden');

    $magicLine.stop().animate({
    left: $magicLine.data("origLeft"),
    width: $magicLine.data("origWidth")
    });
    })
    #68396
    TT_Mark
    Member

    You got a live demo we can take a look at?

    #68400

    I apologize, I tried to upload in web hosting(http://elandra.netau.net/)but apparently the script does not work, maybe something is missing .. Essentially, I edit the Magic line script that made chris on this site(https://css-tricks.com/examples/MagicLine/). I want to make it drop down menu. but I have trouble .. can you help me?

    #68401
    TT_Mark
    Member

    You’re including the menu.js file before you include the JQuery library. Switch them around and you should get something :-)




    should be




    #68247

    okay, thanks..
    but my problem is i cant make it dropdown..
    can you help me please ?
    i haven’t clue anymore..

    #68275
    TT_Mark
    Member

    The problem with your hover, is the following line

    $("ul.group li ul").css('visibility', 'visible');

    It is basically saying that if you hover over ANY of the menu items, you should show ALL of the dropdown lists, which is obviously not what you want to do. In Safari your menu does drop down and show the submenu, but the submenu appears in the wrong place and appears whenever you hover over any of the menu items.

    You should change this line:

    $("ul.group li").find("a").hover(function() {

    to:

    $("ul.group li a")hover(function() {

    then you will want to get the sibling ul for that a. Completely off the top of my head, I think it may be something like:

    $(this).siblings("ul").css('visibility', 'visible')
    #67924

    I copy the suggestions you have, but still can not ..
    This script is very intriguing, but I have no idea anymore ..
    confused ..
    thank you for your suggestions, but help me please…

    #67925

    its Magic line script so messy too, help me..

    #67746

    TT_Mark , thank you very much.. you so so help me… thanks… your script is working..

    #60660
    cmsturg
    Member

    I am trying to make the same changes. Can you post your final solution?

    #60666

    final solution about what ?
    about magic line dropdown ?

    #48740
    nathh
    Member

    Please, can you post the complete final magic line dropdown code??

    #48294

    This is the html code “dont forget to call the css code, jquery menu code, and the jquery basic code (http://blog.jquery.com/2011/03/31/jquery-152-released/)”:



    This is the css code :


    /*=== Menu Styles ===*/

    .nav-wrap {

    background-color: #222;

    border-top-width: 1px;
    border-bottom-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-color: #333;
    border-bottom-color: #333;

    margin-right: auto;
    margin-left: auto;
    padding-left:16%;
    }


    .group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
    *:first-child+html .group { zoom: 1; } /* IE7 */

    #example-one { margin: 0 auto; list-style: none; position: relative; width: auto;

    }
    #example-one li {
    display: inline;
    }
    #example-one li a {
    font-family: Georgia, Times, serif;
    color: #fff;
    font-size: 11px;
    display: block;
    float: left;
    padding: 6px 10px 4px 10px;
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 0px;
    }
    #example-one li a:hover {
    color: #5555FF;
    }
    #magic-line {
    position: absolute;
    bottom: +2px;
    left: 0;
    width: 100px;
    height: 1px;
    background-color: #fff;
    z-index: 3;
    }
    .current_page_item a { color: #fff !important; }

    #example-one li ul{

    width: 240px;
    visibility: hidden;
    position: absolute;
    top: 100%;
    z-index: 2;
    }

    #subMenu{
    font-weight: normal;
    color: #000;
    background-color: #222;
    border: 1px solid #111;
    position: relative;
    margin: 0px;
    padding: 0px;

    }
    #subMenu a{
    text-align:left;
    color: #000;
    width: 220px;

    border-top-width: 1px;
    border-bottom-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-color: #333;
    border-bottom-color: #111;
    }

    #subMenu a:hover{
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #999;
    }

    This is the javascript code :


    $(function(){

    var $el, leftPos, newWidth,
    $mainNav = $("#example-one");

    /*
    EXAMPLE ONE
    */
    $mainNav.append("
  • ");

    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());



    $("ul.group li a").hover(function() {

    $el = $(this);
    leftPos = $el.position().left;
    newWidth = $el.parent().width();

    $("ul.group li").hover(function() {
    $(this).addClass("hover");
    $('ul:first',this).css('visibility', 'visible');
    $('ul:first',this).css('left', leftPos);
    },function() {
    $(this).removeClass("hover");
    $('ul:first',this).css('visibility', 'hidden');
    }),

    $magicLine.stop().animate({
    left: leftPos,
    width: newWidth,
    });

    }, function() {
    $magicLine.stop().animate({
    left: $magicLine.data("origLeft"),
    width: $magicLine.data("origWidth")
    });
    });

    $("ul#subMenu li").hover(function() {
    $magicLine.stop().animate();
    $("#magic-line").css('visibility', 'hidden');

    }, function() {
    $("a.suba").css('color', '#fff');
    $("#magic-line").css('visibility', 'visible');
    leftPos = $el.position().left;
    newWidth = $el.parent().width();

    });

    });

    Sorry i cant give you the live demo, but i can guarantee this script is works cause i use this one.. OK?

    #46718

    Hi

    I have created the demo page using erlandazakaria code .Its fantastic I have changed the code a bit so that magic line effect remains when hover on the sub menu

    check out the demo here
    http://unimax-systems.info/magic-dropdown.html

    Saleh Galiwala
    unimax SYSTEMS
    [email protected]
    http://unimax-systems.info

Viewing 15 posts - 1 through 15 (of 17 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.