javascript - Menu text color move effect -



javascript - Menu text color move effect -

my menu looks this:

<nav> <a href="#"> <span class="black">home</span> <span class="red active">home</span> </a> <a href="#"> <span class="black">longer menu item</span> <span class="red">longer menu item</span> </a> <a href="#;"> <span class="black">two words</span> <span class="red">two words</span> </a> <a href="#"> <span class="black">about</span> <span class="red">about</span> </a> <a href="#"> <span class="black">contact</span> <span class="red">contact</span> </a> </nav>

the active menu item has reddish color. when user clicks on link, reddish color should go right active menu item, , in same time clicked link should turn reddish starting left right.

here's fiddle show mean. click on sec link, , after 3rd link see effect.

if go left right clicked link turns reddish beautifully, initial reddish text moves right, instead of moving color.

what should repair effect? how can create effect work in left direction too?

any suggestions welcome.

edit: clear things up: this effect, on text. if move mouse on first row left right , back, you'll see effect. want in on click, not on hover.

there 2 cases:

a menu item clicked on right side of active link -> color effect should go right. a menu item clicked on left side of active link -> color effect should go left

perhaps meant this: http://jsfiddle.net/t1w4gy0w/3/

updated both ways: http://jsfiddle.net/t1w4gy0w/4/

slight improvement if user presses quickly: http://jsfiddle.net/t1w4gy0w/5/

class="lang-js prettyprint-override">$('.blackholder').parent().on('click', function(event) { if ($(this)[0] === $('.red.active').parent()[0]) { return; } var animfull = function (obj) { obj.addclass('top').finish() .css('width', '0').animate({ width: '100%'}, { duration: 1000, queue: false, complete: function () { $(this).removeclass('top'); } }); }; var moveright = function (atag) { animfull( $('.red.active').removeclass('active').siblings('.black') ); animfull( $(atag).children('.red').addclass('active') ); }; var animzero = function (obj) { obj.addclass('top').finish() .animate({ width: '0'}, { duration: 1000, queue: false, complete: function () { $(this).removeclass('top').css('width', '100%'); } }); }; var moveleft = function (atag) { animzero( $('.red.active').removeclass('active') ); $(atag).children('.red').addclass('active'); animzero( $(atag).children('.black') ); }; if ($('.red.active').parent().position().left < $(this).position().left) { moveright(this); } else { moveleft(this); } }); class="lang-css prettyprint-override">.blackholder { color: #000; } .black.top, .red.top { z-index: 3; } .black { z-index: 1; color: #000; left: 0; position: absolute; } .red { color: red; left: 0; position: absolute; } .red.active { z-index: 2; } class="lang-html prettyprint-override"><nav> <a href="javascript:void(0);"> <span class="blackholder">home</span> <span class="black">home</span> <span class="red active">home</span> </a> <a href="javascript:void(0);"> <span class="blackholder">longer menu item</span> <span class="black">longer menu item</span> <span class="red">longer menu item</span> </a> <a href="javascript:void(0);"> <span class="blackholder">two words</span> <span class="black">two words</span> <span class="red">two words</span> </a> <a href="javascript:void(0);"> <span class="blackholder">about</span> <span class="black">about</span> <span class="red">about</span> </a> <a href="javascript:void(0);"> <span class="blackholder">contact</span> <span class="black">contact</span> <span class="red">contact</span> </a> </nav>

if need changes, me adding comments code, sense free comment.

javascript jquery html5 css3

Comments

Post a Comment

Popular posts from this blog

c - Compilation of a code: unkown type name string -

c - Compilation of a code: unkown type name string - i have next lines of code compiler says following: "unknown type name 'string'" both in declaration , definition of function. can tell me what's wrong? thanks. #include <stdio.h> #include <stdlib.h> #include <string.h> void frecognizeclient(string *actualclient) there no string type in c. need utilize array so: char array[10]; then can pass in function: void frecognizeclient(char *actualclient); c arrays string compilation
Read more

java - Bypassing "final local variable defined in an enclosing type" -

java - Bypassing "final local variable defined in an enclosing type" - i'm writing programme , i'm getting "the final local variable asd cannot assigned, since it's defined in enclosing type". i provide illustration not code produces error aswell. have arraylist utilize later (if define within button can't utilize later on), outside of button, pressing button should give values arraylist. in illustration "create new arraylist" cause same problem. button btn = new button("asd"); final arraylist asd = new arraylist(); btn.setonaction(new eventhandler<actionevent>() { public void handle(final actionevent event) { asd = new arraylist(); //here's error.. } }); clear arraylist , add together values. java javafx
Read more

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) -

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) - hello have problem hibernate , jackson. have 2 pojos @entity @table(name = "users") public class user implements serializable { static final long serialversionuid = 4235637833262722256l; @id @generatedvalue private int id; @column(name = "creation_date") private date creationdate; @column(name = "first_name") private string firstname; @column(name = "last_name") private string lastname; @version @column(name = "version") private int version; @column(name = "e_mail") private string email; @column(name = "enabled") private boolean enabled; @column(name = "login") private string login; @column(name = "password") private string password; @jsonmanagedreference("role") @onetomany(mappedby = "user", cascade = cascadetype.all,fetch = fetchtyp...
Read more