title: Magic line Navigation
body: <p>I am using the magic line navigation for a website but would not like to have a home menu button, as the logo will do this. What is the best method for integrating a logo into this menu without changing the current layout? p.s. the logo should be appearing next to the menu on the left, did not want to add all the css in.</p>
  
  <p>Attaching the js fiddle link.
  <a href="http://jsfiddle.net/LjxmG/" rel="nofollow">http://jsfiddle.net/LjxmG/</a></p>
  
  <p>// DOM Ready</p>
  
  <pre><code>$(function() {
  
  var $el, leftPos, newWidth;
      $mainNav2 = $("#example-two");
  
  /*
      EXAMPLE ONE
  */
  
  /* Add Magic Line markup via JavaScript, because it ain't gonna work without */
  $("#example-one").append("&lt;li id='magic-line'&gt;&lt;/li&gt;");
  
  /* Cache it */
  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").find("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")
      });    
  });
  
  /*
      EXAMPLE TWO
  */
  
  $mainNav2.append("&lt;li id='magic-line-two'&gt;&lt;/li&gt;");
  
  var $magicLineTwo = $("#magic-line-two");
  
  $magicLineTwo
      .width($(".current_page_item_two").width())
      .height($mainNav2.height())
      .css("left", $(".current_page_item_two a").position().left)
      .data("origLeft", $(".current_page_item_two a").position().left)
      .data("origWidth", $magicLineTwo.width())
      .data("origColor", $(".current_page_item_two a").attr("rel"));
  
  $("#example-two a").hover(function() {
      $el = $(this);
      leftPos = $el.position().left;
      newWidth = $el.parent().width();
      $magicLineTwo.stop().animate({
          left: leftPos,
          width: newWidth,
          backgroundColor: $el.attr("rel")
      })
  }, function() {
      $magicLineTwo.stop().animate({
          left: $magicLineTwo.data("origLeft"),
          width: $magicLineTwo.data("origWidth"),
          backgroundColor: $magicLineTwo.data("origColor")
      });    
  });
  
  /* Kick IE into gear */
  $(".current_page_item_two a").mouseenter();
  
  });
  </code></pre>