How to create nav bar like this?

Hi all,

I’ve been trying to figure out how to create the nav bar as seen in this website <snip></snip>.

How do I create the nav bar with the dropdown without loading a new page? I figured it’s probably flash or jQuery.

Appreciate any help rendered.

Thankyou!

Hi,

You can use csss/html and JS to create a drop down menu that works on click - no need for flash. If you are not capable of building it yourself then I suggest doing a search for some jquery menus as there are many about. Or even a simple hide and show with [URL=“http://api.jquery.com/fadeToggle/”]fade effect.

Hi Paul,

Sweet. Appreciate your help.

In the first link, when one clicks on one of the dropdown links, will the link load on the same page?

The destination of the link will open in a new page so if you wanted the resource to load in the same page then you would either again need to do a hide and show effect with JS (or jquery if you can’t manage it with js) or fetch the content with ajax and load it into the same page. There are jquery solutions to help with this but you will need to find something to suit your needs.

However loading content in the same page should only be done is small doses and is not a viable way to create a whole site. Otherwise you end up with a one page site that can’t be indexed properly either by search engines or by humans. Usually when you click a link you want to load a new page unless its just for an image slideshow effect.

Ah I see, thanks for sharing your knowledge.

Yes, I’m actually looking to create something like the website I referenced above. I’m planning to create up to 10 pages. And each link will load a photo gallery (image slideshow effect like what you mentioned) on the same page. It’s pretty doable yeah?

Definitely. There are lots of free gallery scripts out there too which work even better than Flash ones. If you describe how you want the gallery to function, we can suggest some. :slight_smile:

Awesome! Thank you!

The gallery is very simple. Nav menu to be on the left, and the gallery to cover most of the background. The gallery should have 3 simple buttons at the bottom. 1. Next photo 2. Previous photo 3. Show all thumbnails. I found a template here: http://dynamicdrive.com/dynamicindex4/simplegallery.htm

However, this template doesn’t have the feature to show all thumbnails/photos…

Do you have any other templates that you know of? Thankyou!

Not sure I can give you exactly what you want, but if you Google “jQuery thumbnail gallery” (for example) you’ll find a lot of options, such as:

http://www.twospy.com/galleriffic/example-2.html

http://exposure.blogocracy.org/demos/demo1.html?v=0.9.1

http://bxslider.com/examples/thumbnails-pager-method-2

This is where I have an issue and I would not have 10 galleries on the same page. That doesn’t make web sense. Just go to a new page and show each gallery on that new page and have a proper site with pages that users can bookmark and that search engines can find. That will simplify your page structure and break it down into smaller and separate components. The menu will just function on its own and then you have a photo gallery on each page as required.

That’s how I would do it anyway :slight_smile:

I see :slight_smile: Makes perfect sense to me too.

The person whom I’m creating the site for has different objectives though. He doesn’t need many visitors to his site. He merely wants potential clients to have a good first impression of his works, and engage his services based on that first impression. But I’ll definitely bear in mind the wider implications of having all the galleries on the same page…

O, I didn’t realize you wanted multiple galleries per page. There are many gallery scripts that handle this quite well, all the same. On the main page you just have thumbnails, which the enlarged images are pulled from elsewhere, so that they don’t all have to load from the get-go.

I suppose in that case having it all on one page would not be such an issue if it was merely to show clients etc. However, it may miss the opportunity of reaching a wider audience but if that’s not a problem for you then it doesn’t really matter.

That’s right. I just need to find a template that suits my needs…

I expect you can find something here: http://planetozh.com/projects/lightbox-clones/

For example, Highslide allows multiple galleries each “hidden” under a thumbnail, which I think is the kind of thing you’re looking for.

They look good! Thankyou!

Does Highslide allow the user to scroll through the gallery without maximizing though? I’m looking for something that looks like this. User can scroll through the gallery without maximizing the photo. But it doesn’t include a function to view all thumbnails at once: http://www.dynamicdrive.com/dynamicindex4/simplegallery_suppliment.htm

There are various options, with or without a thumbnail strip. The Highslide site gives links to various examples, including this site, which is particularly good.

I found a good nav bar here