TBRP NavBar - CnC

View previous topic View next topic Go down

TBRP NavBar - CnC

Post by joshier on Wed Feb 27, 2013 9:41 pm

So I decided to redo the TBRP NavBar once more, this time to something a little simpler and less space consuming... As the Refuge forum doesn't really have a place for codes and scripts, creative design seemed as good as any other place to post it for some feedback. The script itself uses only HTML and CSS so is relatively simple as is the buttons, but it has some simple yet effective hover effects when you place your mouse over the buttons.

Basic description:
1. Hover effects on buttons
2. Simple and small
3. Remains fixed at the top of the screen

As it seems reluctant to embed in this post, you can check it out here:
http://joshier.coffeecup.com/ <- Basic form (No working links or fixed attribute)
http://tbrp.forumotion.co.uk/ <- Newest form (Working links and fixed attribute)

Any comments or feedback on either the design or coding is much appreciated (If on chrome you can view the HTML code by clicking the first link and inspecting element or by right clicking and viewing source code). Please keep in mind the idea is to remain fairly simplistic in design.
avatar
joshier
Shinigami

Male Posts : 203
Join date : 2013-01-18
Age : 21
Location : Essex, UK
Designing Club

Back to top Go down

Re: TBRP NavBar - CnC

Post by +RoRo on Wed Feb 27, 2013 11:30 pm

For the design aspect of it, you should add a subtle gloss. Fill have of it with a white (using the marquee) and lower the opacity to about 5-10. It'll help make it stand out a bit more. And use a font that's straight (Arial, Calibri, etc.). For a navigation button, it shouldn't be too fancy (if you want it to look professional). Just my 2 cents though Smile
avatar
+RoRo
Academy Student

Posts : 29
Join date : 2013-02-27

Back to top Go down

Re: TBRP NavBar - CnC

Post by joshier on Thu Feb 28, 2013 3:04 am

Had a play with adding the gloss as well as experimented with a few other subtle effects however it blends with the gradient due to how transparent it becomes. In regards to the font, could you expand a little? The font seems fine to me as it doesn't particularly stand out nor is unreadable.
avatar
joshier
Shinigami

Male Posts : 203
Join date : 2013-01-18
Age : 21
Location : Essex, UK
Designing Club

Back to top Go down

Re: TBRP NavBar - CnC

Post by joshier on Thu Feb 28, 2013 9:49 am

I decided to do a bit more work on the script and made some minor graphical changes.
Check it out in the TOP RIGHT corner -> http://tbrp.forumotion.co.uk/

Additions:
Added the link to refuge similar to my old navbar, however it now links directly instead of an Iframe.
Added a lighter background to removed the "floating" look as you scroll up and down the page
Added a profile button


Plans:
I will probably add a hover effect for the main menu instead of just the sub menus at some point. Also working on transferring the log out and messages buttons onto it. Log out is fairly simple however I will most likely need to find the source code for the javascript to do the same with the message button in order to keep its ability to change appearance when you recieve a new message.


But as before, let me know what you all think
avatar
joshier
Shinigami

Male Posts : 203
Join date : 2013-01-18
Age : 21
Location : Essex, UK
Designing Club

Back to top Go down

Re: TBRP NavBar - CnC

Post by +RoRo on Thu Feb 28, 2013 10:39 am

Here is an example of what I meant:



*Top is normal
*Bottom is hover (you can add a color to the hover)
avatar
+RoRo
Academy Student

Posts : 29
Join date : 2013-02-27

Back to top Go down

Re: TBRP NavBar - CnC

Post by joshier on Thu Feb 28, 2013 12:55 pm

Okay I see what you mean now.

Updated Graphics Version:
http://joshier.coffeecup.com/TBRPNavbar

Simplified Version:
http://tbrp.forumotion.co.uk/

Personally I prefer the simplified version as it matches the forum better but I do see what you mean...
avatar
joshier
Shinigami

Male Posts : 203
Join date : 2013-01-18
Age : 21
Location : Essex, UK
Designing Club

Back to top Go down

Re: TBRP NavBar - CnC

Post by +RoRo on Thu Feb 28, 2013 1:59 pm

No problem, glad I could have helped in any way Smile
avatar
+RoRo
Academy Student

Posts : 29
Join date : 2013-02-27

Back to top Go down

Re: TBRP NavBar - CnC

Post by joshier on Thu Feb 28, 2013 2:43 pm

I appreciate it. Always nice to get ideas and advice for ways to improve...

"Final" version is now done Smile
http://tbrp.forumotion.co.uk/ <- TOP RIGHT of the page

Somehow it is just feels easier to attach the link each time, lol
avatar
joshier
Shinigami

Male Posts : 203
Join date : 2013-01-18
Age : 21
Location : Essex, UK
Designing Club

Back to top Go down

Re: TBRP NavBar - CnC

Post by Sponsored content


Sponsored content


Back to top Go down

View previous topic View next topic Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum