Closed

Modifications to website header using Ajax / Bootstrap/ Jquery

We are looking for a designer programmer to finish our header menu. The instructions for the task list is here - [url removed, login to view]

1. Search bar

we need an effect such as the search effect on [url removed, login to view] where it transitions to left side. So lets move the search to the top right corner as shown in the attachment.

also seems like sometimes we click and it won't respond, have to click 3-4 times to get search open.

here are siimlar fiddles for it - [url removed, login to view]

[url removed, login to view]

2. Groups tab.

we want to show data in a visual form like foreign policy.com. i have attached filed called header_groups_trending.png. That is to show how we want the "Trending" tab to look for situatons, groups and locations. We want to show 9 items on top for All "TRENDING" tabs wherever they are.

use the full width sizing from - [url removed, login to view]

3 Search inside submenus.

remove the "Search" button which is on the left side. as its redundant, and keep the sub-search bar that is below the main menu. (decrease the sub-search size to 12px)

4 the height of menu should be same for all menu, extend the left side height if needed to fill as much as the right side. (view [url removed, login to view] for example.

5. analytics,

Add the 2x1 row as shown in the [url removed, login to view]

use the [url removed, login to view] for slide out effect

6. remove "search" tab from under the sub menus with its icon. we dont need it.

7. On responsiveness, sometimes logo falls behind "Sign In" , make it so it is always consistent on the left side top.

8. Decrease font size of Locations Situations Groups Analytics Finance Headings. Make them about 18px and the left side menu 16px.

9. When scrolling over Groups/Sits the map is darker and different then when scrolling over any other menu item. The effect we need is the grayed out map that appear when we scroll over Analytics and Finance. use png, or just leave it uniform everywhere, we can change png lightness.

8. In the attached image, there is a small 1px light gray (##FBFBFB) line that that separates the top part of the header (sign in/post event) from the bottom Location, Situations, Groups part. We need to add this

9. When mouseover on Signin, we can’t see the text as the text and bg color are both white

10. search Location, groups, etc text -- change the font to sansation light too

11 FOR FINANCE -

SPLIT the MENU and make this menu into another menu, same style, and call it Finance Menu

This goes open when Finance is clicked.

header_finance.[psd is the file that we ned to make.

Main, Finance, Commodities, Companies Solutions

Main - goes back to main site

Finance - goes to /[url removed, login to view]

Commodities

- sub menu has same thing as "companies".

Industries,

Companies

Trending

Companies - made in [url removed, login to view]

use this file, its same elements as we did.

trending is the same structure as before.

Solutions

[url removed, login to view] is the file for it. it has 4 boxes.

Industries, Global Issues, Products - all use the same format as given in [url removed, login to view]

12 SORT bar is missing

the sort bar appears always below the main menu on the following pages -

It is to be on, locations, situations, groups pages.

[url removed, login to view] is the file which shows this menu.

If a sub menu is open, it does not effect the

______________________________________________________

The css/ psd files for the menu are here - [url removed, login to view]

______________________________________________________

they are in zip format. we want you to finish the menu as per requirements, best bid price and possible similar work with feedback wins.

Skills: AJAX, Bootstrap, CSS, HTML5, jQuery / Prototype

See more: add bootstrap data item, css files, which site is the best logo designer, where to make an icon, website tab icon, website png icon, website icon html, website best image format, uk logo companies, uk app icon designer, top logo companies, top best designer website, the prototype part 1, the best logo designer app, tabs prototype, tab prototype, search for website designer in uk, responsive icon png, prototype with bootstrap, prototype tabs, prototype part 2, prototype part 1, prototype move, prototype map, prototype items

About the Employer:
( 161 reviews ) Ghaziabad, United States

Project ID: #5467480