├── README.md
├── index.html
├── js
└── example.js
└── css
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # jQuery MagicLine
2 |
3 | [Demo on GitHub Pages](http://css-tricks.github.io/MagicLine/)
4 |
5 | From an [old blog post](https://css-tricks.com/jquery-magicline-navigation/)
6 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | jQuery MagicLine Navigation Demo
11 |
12 |
13 |
14 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | jQuery MagicLine Navigation Demo
27 |
28 |
29 |
45 |
46 |
60 |
61 |
62 |
63 |
--------------------------------------------------------------------------------
/js/example.js:
--------------------------------------------------------------------------------
1 | // DOM Ready
2 | $(function() {
3 |
4 | var $el, leftPos, newWidth;
5 | $mainNav2 = $("#example-two");
6 |
7 | /*
8 | EXAMPLE ONE
9 | */
10 |
11 | /* Add Magic Line markup via JavaScript, because it ain't gonna work without */
12 | $("#example-one").append("");
13 |
14 | /* Cache it */
15 | var $magicLine = $("#magic-line");
16 |
17 | $magicLine
18 | .width($(".current_page_item").width())
19 | .css("left", $(".current_page_item a").position().left)
20 | .data("origLeft", $magicLine.position().left)
21 | .data("origWidth", $magicLine.width());
22 |
23 | $("#example-one li").find("a").hover(function() {
24 | $el = $(this);
25 | leftPos = $el.position().left;
26 | newWidth = $el.parent().width();
27 |
28 | $magicLine.stop().animate({
29 | left: leftPos,
30 | width: newWidth
31 | });
32 | }, function() {
33 | $magicLine.stop().animate({
34 | left: $magicLine.data("origLeft"),
35 | width: $magicLine.data("origWidth")
36 | });
37 | });
38 |
39 |
40 |
41 |
42 | /*
43 | EXAMPLE TWO
44 | */
45 |
46 | $mainNav2.append("");
47 |
48 | var $magicLineTwo = $("#magic-line-two");
49 |
50 | $magicLineTwo
51 | .width($(".current_page_item_two").width())
52 | .height($mainNav2.height())
53 | .css("left", $(".current_page_item_two a").position().left)
54 | .data("origLeft", $(".current_page_item_two a").position().left)
55 | .data("origWidth", $magicLineTwo.width())
56 | .data("origColor", $(".current_page_item_two a").attr("rel"));
57 |
58 | $("#example-two a").hover(function() {
59 | $el = $(this);
60 | leftPos = $el.position().left;
61 | newWidth = $el.parent().width();
62 | $magicLineTwo.stop().animate({
63 | left: leftPos,
64 | width: newWidth,
65 | backgroundColor: $el.attr("rel")
66 | })
67 | }, function() {
68 | $magicLineTwo.stop().animate({
69 | left: $magicLineTwo.data("origLeft"),
70 | width: $magicLineTwo.data("origWidth"),
71 | backgroundColor: $magicLineTwo.data("origColor")
72 | });
73 | });
74 |
75 | /* Kick IE into gear */
76 | $(".current_page_item_two a").mouseenter();
77 |
78 | });
--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
1 | /*
2 | CSS-Tricks Example - MagicLine Demo
3 | by Chris Coyier
4 | http://css-tricks.com
5 | */
6 |
7 | * { margin: 0; padding: 0; }
8 | body { font: 14px Georgia, serif; background: #2F2626; color: #eee; }
9 |
10 | header { padding: 100px 0 0 0; display: block; }
11 | header h1 { width: 960px; margin: 0 auto; }
12 | a { color: #eee; }
13 | a:hover { color: white; }
14 |
15 | .nav-wrap {
16 | margin: 50px auto;
17 | background-color: rgba(0,0,0,0.6);
18 | border-top: 2px solid white;
19 | border-bottom: 2px solid white;
20 | }
21 |
22 | /* Clearfix */
23 | .group:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; }
24 | *:first-child+html .group { zoom: 1; } /* IE7 */
25 |
26 |
27 |
28 | /* Example One */
29 | #example-one {
30 | margin: 0 auto;
31 | list-style: none;
32 | position: relative;
33 | width: 960px;
34 | }
35 | #example-one li {
36 | display: inline-block;
37 | }
38 | #example-one a {
39 | color: #bbb;
40 | font-size: 14px;
41 | float: left;
42 | padding: 6px 10px 4px 10px;
43 | text-decoration: none;
44 | text-transform: uppercase;
45 | }
46 | #example-one a:hover {
47 | color: white;
48 | }
49 | #magic-line {
50 | position: absolute;
51 | bottom: -2px;
52 | left: 0;
53 | width: 100px;
54 | height: 2px;
55 | background: #fe4902;
56 | }
57 | .current_page_item a {
58 | color: white !important;
59 | }
60 | .ie6 #example-one li, .ie7 #example-one li {
61 | display: inline;
62 | }
63 | .ie6 #magic-line {
64 | bottom: -3px;
65 | }
66 |
67 |
68 | /* Example Two */
69 | #example-two {
70 | margin: 0 auto;
71 | list-style: none;
72 | position: relative;
73 | width: 960px;
74 | }
75 | #example-two li {
76 | display: inline-block;
77 | }
78 | #example-two li a {
79 | position: relative;
80 | z-index: 200;
81 | color: #bbb;
82 | font-size: 14px;
83 | display: block;
84 | float: left;
85 | padding: 6px 10px 4px 10px;
86 | text-decoration: none;
87 | text-transform: uppercase;
88 | }
89 | #example-two li a:hover {
90 | color: white;
91 | }
92 | #example-two #magic-line-two {
93 | position: absolute;
94 | top: 0;
95 | left: 0;
96 | width: 100px;
97 | background: #900;
98 | z-index: 100;
99 | -moz-border-radius: 5px;
100 | -webkit-border-radius: 5px;
101 | border-radius: 5px;
102 | }
103 | .current_page_item_two a {
104 | color: white !important;
105 | }
106 | .ie6 #example-two li, .ie7 #example-two li {
107 | display: inline;
108 | }
--------------------------------------------------------------------------------