Request: Animated Navigation Bar Buttons Nintendo's Mario Coin Box Style

Creation Type: Animated Navigation Bar Buttons
Size (In Pixels): Best fit, not too big in height though.
Primary Colors: Like the original Mario Coin Boxes.
Secondary Colors: None.
Images to include: See Detailed Description below.
Text to Insert: See Detailed Description below.
Font (Provide Download Link): Same as the current toolbar.
Font Color: Either #FFFFFF (preferred) or #5B3818. Please compare what's best to the forum.
Link to My Forumotion Forum: [You must be registered and logged in to see this link.]
Username on Your Forum: Admin
Link to your Last Graphics Request: [You must be registered and logged in to see this link.]
Detailed Description: I'd like to request a set of new navbar icons in Dutch. I've provided the translation for them below. If any other button IS required, please let me know. I'm not using the "messages" buttons because those links are already being provided in the FM toolbar.

Objective:
Create animated Mario Coin Box style navigation bar buttons with the Dutch translation inside. When hovering or selecting a button, a coin should jump out just like in the Mario game and fall behind the back of the button out of view and the text should glow a bit. The coin should be able to jump in front of the banner if possible (if not, I've use padding to move the navigation bar down).

Also, I'd like to request a separate brick block as a spacer in the same px. height as the navigation buttons to fill the gaps.

An example of a Mario Coin Box can be found in Fédra's banner she created for me (the block with the ?-mark):
[You must be registered and logged in to see this image.]

Translation:
Index or Forum => Index
Gallery => Galerij
Portal => Portaal
FAQ => FAQ
Calendar => Kalender
Search => Zoeken
Memberlist or Members => Leden
Usergroups or Groups => Groepen
Edit Profile or Profile => Profiel
Register or Join Us or Join => Registreren
Log Out or Exit => Uitloggen
Log In => Inloggen

And I'd like an extra button for chat: Chatbox
And on for the ACP, marked with a Red Star in front of "ACP" (because I'm used to that on [You must be registered and logged in to see this link.] ACP
I just feel this is gonna be a tough one again  , so good luck and many thanks in advance!

im about to head to bed but wanted to make sure this is what ur looking 4 before i go any further

[You must be registered and logged in to see this image.]


anyone else fill free to use this image to help make the buttons if this is what sam is looking for

Well, almost. The left and write brick boxes of that top animated picture I could use as spacers, but the middle one which holds the coin should be like the one with the question mark in Fédra's banner, except the question mark should be replaced by text ofc. And if that box has rounded corners, so should the spacers have. I hope you understand what I mean  

I'm sorry. It's those darn time zones, yk. I live in Europe, Amsterdam / Paris time zone...

somthing like this?

 [You must be registered and logged in to see this image.]

No, not scrolling. The middle block holding the text should be longer in length to be able to hold the non-scrolling text. And the blocks must be of the same height. I've been thinking just now. I think it's 3 parts. 1. is the blocks, which probably can reasonably easily created, 2. is JS for the on hover / on click part to trigger 3. a little CSS the jumping coin and a small JS delay for the coin to disappear. Right?

yea i could just create the yellow box and you could use the font already on the forum so you can style it to your choice.... theni could render the coin and you could do the rest with css and script but u will need ange help on the coin

That's why I requested it here, because I'm not good at it! OK, fair enough, since this involves multiple disciplines, I'll ask Ange to have a look at the scripting part.

i already pretty much wrote everything up ange will just have to help a lil with the script i already sent it in a pm with all of the info images and everything

Thanks!!!!!! Hey, I'm stuck here at home and I'm really tired. Do you mind? I'll be back later on kays?

its a forum its not going anywhere lol ..have goodnight im abt to crash myself i been up all night and day trying to learn some jquery

ok ange is probably been busy so hasnt wrote me back yet but i got it pretty much figured out

[You must be registered and logged in to see this image.]


ok add this to your css stylesheet

Code:


 ï¿½ �.navlinks li a {margin: 0px!important;background-size:100% 100%!important; background-repeat: no-repeat !important; text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black;}
.navlinks li a { color:white!important;
padding: 0px !important;
width: 131px !important;
height: 34px !important;
background: url('https://www.filepicker.io/api/file/kjWhiv7iRKWqMIiO7tNK+mrbnormal.png') no-repeat scroll 0px 0px transparent;
display: inline-block;
}
.navlinks li{width: 190px!important;line-height: 34px!important;
display:inline-flex!important;}


ul.linklist li:before {
display: inline-block;
width: 33px;
height:34px;
margin-left: -5px;
content: "";
background: url("https://www.filepicker.io/api/file/7xzjlY8oRh6huiVnZyr0+mrblock.png") no-repeat;
background-size: 100%;
}
ul.linklist li:after {
display: inline-block;
width: 33px;
height: 34px;
margin-left: -5px;
content: "";
background: url("https://www.filepicker.io/api/file/7xzjlY8oRh6huiVnZyr0+mrblock.png") no-repeat;
background-size: 100%;
}
#overlay {
position:initial;
margin-left: 40px;
margin-top:-95px;

width: 44px;
height: 61px;
max-height:62px;
z-index: 999999;
background-image: url(https://www.filepicker.io/api/file/m9JiWuuHRgKRsvIRFElg+mrcoin.gif)!important;
}
ul.navlinks{border:none!important;}
.navbar{background: none !important;}

then create a javascript and place it on all pages

use this

Code:

$(".navlinks li a").mouseover(function(){ $(this).append('<div id="overlay"> </div>');});
$(".navlinks li a").mouseout(function(){ $('#overlay').remove();});

results

[You must be registered and logged in to see this image.]

Almost there!

[You must be registered and logged in to see this image.]

I've marked with red crosses what I don't need. I thought this could be modular and scalable but it's fixed. So, could you please remove them as they're already being offered in the fa-bar?

And the following text should be changed:
Gebruikersgroepen => Groepen
Gebruikerslijst => Leden

I prefer to have the navbar on 1 line, not 2, so maybe some of that spacers (boulders) should go? If you could make this scalable, like I can add buttons myself when needed, that 'd be great!

If you need an account on my website, please let me know!

EDIT: I've used the color picker to determine the color of the ?-block Fédra used in the banner and it's gold: #FCDE33 for the block and goldenrod for the edge of the block: #D3A839. Maybe you could use that in the nav bar boxes (not the brick boulders).

css

Code:


  ul.navlinks li a { top:0px !important;margin: 0px!important;background-size:100% 100%!important; background-repeat: no-repeat !important; text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black;}
    ul.navlinks li a { color:white!important;
    padding: 0px !important;
    width: 80px !important;
    height: 20px !important;
    background: url('https://www.filepicker.io/api/file/kjWhiv7iRKWqMIiO7tNK+mrbnormal.png') no-repeat scroll 0px 0px transparent;
    display: inline-block;
     
    }
    ul.navlinks li{width: 95px!important;line-height: 20px!important;
    display:inline-flex!important; display: -webkit-inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -webkit-box-pack: center;
  -webkit-flex-pack: center;
  -webkit-justify-content: center;
  -webkit-flex-align: center;
  -webkit-align-items: center;
  vertical-align: top;}

ul.navlinks .indexbut:before {
  display: inline-block;
    width: 20px;
    height: 21px;
    margin-left: -20px;
    content: "";
    background: url("https://www.filepicker.io/api/file/7xzjlY8oRh6huiVnZyr0+mrblock.png") no-repeat;
    background-size: 100%;
    }
 
    ul.navlinks li:after {
  display: inline-block;
    width: 20px;
    height: 21px;
    margin-left: -5px;
    content: "";
    background: url("https://www.filepicker.io/api/file/7xzjlY8oRh6huiVnZyr0+mrblock.png") no-repeat;
    background-size: 100%;
    }
    #overlay {
    position:initial;
    margin-left: 40px;
    margin-top:-95px;

    width: 44px;
    height: 61px;
    max-height:62px;
    z-index: 999999;
    background-image: url(https://www.filepicker.io/api/file/m9JiWuuHRgKRsvIRFElg+mrcoin.gif)!important;
    }
    ul.navlinks{border:none!important;}
    .navbar{background: none !important;margin-left: -15px !important;}


javascript

Code:


$('a[href="/groups"]').text("Groepen");
$('a[href="/memberlist"]').text("Leden");
$('a[href="/"]').parent().addClass('indexbut')
$(".navlinks li a").mouseover(function(){ $(this).append('<div id="overlay"> </div>');});
$(".navlinks li a").mouseout(function(){ $('#overlay').remove();});


Neeeeaarly there... Shall I make you an account? You can edit the lot on my board if you wish...

i dont know what u mean by the lot but yea send me a pm with info

Was this completed?

Leah7 wrote:Was this completed?

I'm not sure Leah. I think the complexity of it all really got Twisted this time. It's a real challenge! I'm still waiting for his answer on this. Thank you!

You could try asking in the support section, if it is coding help that you need.  =)  You can just link this thread and see if anyone else can add their own two cents.

everything was finished i thought. because you removed my admin access... and this can be closed because its the gfx section and the images are complete the rest is scripting and can be solved there if theirs any more issues

@_Twisted_Mods: Your admin access had been removed because of changes I was making for one-and-a-half days (29th Nov. - 1st Dec.). I asked you in the ACP notepad if you still needed admin access, but you didn't answer that one, so I thought I could just temporarily deny admin access for a while so our changes wouldn't be conflicting in time. I haven't been able to work on my board for almost 2 weeks now and when I checked on it just now, the navigation bar pictures seem to have gone. Did something change while I was away? I couldn't find any changes on my board in the log lately ...

EDIT: I just checked and it's got nothing to do with the settings in the ACP, CSS nor JS. It's the original source pictures (hosted PNG files) that have gone missing....   So, please _Twisted_Mods_ if you still have them on your HD somewhere upload them for me, k?

Since the images for this request have been completed and only coding help is now needed, I shall lock this thread and mark it complete. In the future, if coding help is still needed, do not hesitate to make a support thread and link this thread for assistance--I know we have some amazing support moderators and managers that can help you with this issue.

Request complete. [You must be registered and logged in to see this image.] Topic moved to [You must be registered and logged in to see this link.]