I'm stumped-- Mike helped me out with a great, simple navbar a while back. Now, I'd like to add a single dropdown menu under "portfolio" so I can have two links to two seperate portfolios listed. But my navbar seems to use different code than the info here:

http://www.dgrin.com/showthread.php?...ropdown+navbar

Do I need to redesign my navbar to get a dropdown to work? For example, I'm not using <li>, I'm using <li id="link1">

Here's the current HTML:

<li id="link1"> <a href="http://www.petespringer.com" title="home">Home</a>|</li>
<li id="link2"> <a href="http://www.petespringer.com/gallery/2132685" title="portfolio">Portfolio</a>|</li> 
<li id="link3"> <a href="http://www.petespringer.com/gallery/1005610" title="published">Published</a>|</li>
<li id="link4"> <a href="http://www.petespringer.com/gallery/1708147" title="Rates">Rates</a>|</li>
<li id="link5"> <a href="http://www.petespringer.com/gallery/1359287">Order Photos</a>|</li>
<li id="link6"> <a href="http://www.petespringer.com/gallery/976656" title="bio">Bio</a>|</li> 
<li id="link7"> <a href="http://www.petespringer.com/gallery/1038476" title="contact Pete Springer">Contact</a>|</li>
<li>SMUGSEARCH</li>
</ul>
</div>

And yes, I'm aware I'll need the CSS to support this. I'm just stumped after unsuccessfully trying to get this to work for hours now. Most of the threads here are much more complex than what I want-- a single dropdown menu on a single item on my navbar.

Here's my navbar code-- ideally I'd like to alter this so it works with the dropdown.

/* NAVBAR */
#navcontainer {
width:750px; /* width of the navbar container */
margin:0 auto; /* center the navbar */
}

#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
font-weight: bold;

padding: .2em 0; /* give the ul the same top and bottom padding as the li */
background: rgb(33,34,29); /* background color for navbar itself */
}

#navcontainer ul li { display: inline; } /* makes the navbar go horizontal */

#navcontainer ul li a {
text-decoration: none;
padding: .2em .5em; /* NAV LINK SPACING */
color: rgb(255,255,255); /* link color */
background: transparent; /* boxes around links */
}

#navcontainer ul li a:hover {
color: rgb(220,71,45); /* link hover color */
}

EDIT: I figured out a better way to ask my question-- obviously I can add Steve's code from the original dropdown navbar thread and reverse engineer it to work with my site. Is it possible instead to forward engineer the dropdown using my existing navbar?

Originally Posted by dogwood I'm stumped-- Mike helped me out with a great, simple navbar a while back. Now, I'd like to add a single dropdown menu under "portfolio" so I can have two links to two seperate portfolios listed. But my navbar seems to use different code than the info here: http://www.dgrin.com/showthread.php?...ropdown+navbar Do I need to redesign my navbar to get a dropdown to work? For example, I'm not using <li>, I'm using <li id="link1"> And yes, I'm aware I'll need the CSS to support this. I'm just stumped after unsuccessfully trying to get this to work for hours now. Most of the threads here are much more complex than what I want-- a single dropdown menu on a single item on my navbar.

Under Portfolio you want two drops, Individual and Groups?

I would make two sub-categories under portfolio, one called Individuals and
the other called Groups. Then when clicking the menu dropdown for
Individual you would see all galleries in the Individual sub-category.

Does this sound right?

You would add all Individual galleries under the Individual sub-cat and all
groups galleries under the Groups sub-cat.

Easy to do, so fire back if I understand what you want. Only take a minute
or two to create your menu. The CSS is all ready, cut & paste, except that
the colors, etc, would need to be changes.

Al
Link to my menu tutor.

This was pretty simple to throw together.

<div id="menu">
<ul>
<li><a href="http://www.petespringer.com" title="home">Home</a>|</li>
<li><a class="drop" href="" title="portfolio">Portfolio |
    <!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
       <li><a href="http://www.petespringer.com/Individuals">Indivuals</a></li>
       <li><a href="http://www.petespringer.com/Groups">Groups</a></li>
    </ul>  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="http://www.petespringer.com/gallery/1005610" title="published">Published</a>|</li>
<li><a href="http://www.petespringer.com/gallery/1708147" title="Rates">Rates</a>|</li>
<li><a href="http://www.petespringer.com/gallery/1359287">Order Photos</a>|</li>
<li><a href="http://www.petespringer.com/gallery/976656" title="bio">Bio</a>|</li> 
<li><a href="http://www.petespringer.com/gallery/1038476" title="contact Pete Springer">Contact</a>|</li>
<li><form name="searchBox" id="searchBox" method="get" action="/search/index.mg" onsubmit="checkInput('search','searchWords',' ')"><input onclick="checkInput('search','searchWords','')" onblur="checkInput('','searchWords','search')" id="searchWords" name="searchWords" value="search" type="text"><input name="searchType" value="InUser" type="hidden"><input name="NickName" value="petespringer" type="hidden"><input src="/img/spacer.gif" alt="Submit Search" title="Submit Search" class="searchglass" onclick="if(document.searchBox.searchWords.value == 'search') { document.searchBox.searchWords.value = ' '; }" type="image"></form></li>
</ul>  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>

Al

Originally Posted by Allen This was pretty simple to throw together. <div id="menu"> <ul> <li><a href="http://www.petespringer.com" title="home">Home</a>|</li> <li><a class="drop" href="" title="portfolio">Portfolio | <!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li><a href="http://www.petespringer.com/Individuals">Indivuals</a></li> <li><a href="http://www.petespringer.com/Groups">Groups</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="http://www.petespringer.com/gallery/1005610" title="published">Published</a>|</li> <li><a href="http://www.petespringer.com/gallery/1708147" title="Rates">Rates</a>|</li> <li><a href="http://www.petespringer.com/gallery/1359287">Order Photos</a>|</li> <li><a href="http://www.petespringer.com/gallery/976656" title="bio">Bio</a>|</li> <li><a href="http://www.petespringer.com/gallery/1038476" title="contact Pete Springer">Contact</a>|</li> <li><form name="searchBox" id="searchBox" method="get" action="/search/index.mg" onsubmit="checkInput('search','searchWords',' ')"><input onclick="checkInput('search','searchWords','')" onblur="checkInput('','searchWords','search')" id="searchWords" name="searchWords" value="search" type="text"><input name="searchType" value="InUser" type="hidden"><input name="NickName" value="petespringer" type="hidden"><input src="/img/spacer.gif" alt="Submit Search" title="Submit Search" class="searchglass" onclick="if(document.searchBox.searchWords.value == 'search') { document.searchBox.searchWords.value = ' '; }" type="image"></form></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </div> Al

Allen:

Yeah, I think this is it.

I actually want to use two different galleries for the portfolio dropdown, but that's easy enough to change. Just curious-- will the CSS you have in mind allow me to keep my current navbar?

Whoa-- that's some fancy searchbar code you provided. Is that the kind of search box that can be moved to the footer?

Originally Posted by dogwood Allen: Yeah, I think this is it. I actually want to use two different galleries for the portfolio dropdown, but that's easy enough to change. Just curious-- will the CSS you have in mind allow me to keep my current navbar? Whoa-- that's some fancy searchbar code you provided. Is that the kind of search box that can be moved to the footer?

That's your search code from your current site at the right end of your
menu.

I'm confused here, "two different galleries for the portfolio dropdown". A
gallery contains photos. Are you going to have multiple individual and group
galleries? Like this?

Main ........... Drop
(Category) .. (Sub-cats) .. Galleries
Portfolio
............... Individuals
............................... George
............................... Bill
............... Groups
............................... Smith Family
............................... Church Group
............................... Jones Family

Above when you hover Portfolio a dropdown with Individuals and Groups show.

When you click either drop it takes you to a page with all the galleries
in the sub-cat.

This make any sense?

Your menu will look just like it is now except one of the items will have a
dropdown when hovered. In the CSS the positioning and colors etc, which
will have to tweaked.

Al

Edit: Just looked at your site again. The two dropdowns can be the two
gallery links. Was thinking you might have a bunch of Individual and
Groups galleries.

This links directly to the two galleries

<div id="menu">
<ul>
<li><a href="http://www.petespringer.com" title="home">Home</a>|</li>
<li><a class="drop" href="" title="portfolio">Portfolio |
    <!--[if IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
       <li><a href="http://www.petespringer.com/gallery/279819#21161375">Indivuals</a></li>
       <li><a href="http://www.petespringer.com/gallery/1342389#54933014">Groups</a></li>
    </ul>  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="http://www.petespringer.com/gallery/1005610" title="published">Published</a>|</li>
<li><a href="http://www.petespringer.com/gallery/1708147" title="Rates">Rates</a>|</li>
<li><a href="http://www.petespringer.com/gallery/1359287">Order Photos</a>|</li>
<li><a href="http://www.petespringer.com/gallery/976656" title="bio">Bio</a>|</li> 
<li><a href="http://www.petespringer.com/gallery/1038476" title="contact Pete Springer">Contact</a>|</li>
<li><form name="searchBox" id="searchBox" method="get" action="/search/index.mg" onsubmit="checkInput('search','searchWords',' ')"><input onclick="checkInput('search','searchWords','')" onblur="checkInput('','searchWords','search')" id="searchWords" name="searchWords" value="search" type="text"><input name="searchType" value="InUser" type="hidden"><input name="NickName" value="petespringer" type="hidden"><input src="/img/spacer.gif" alt="Submit Search" title="Submit Search" class="searchglass" onclick="if(document.searchBox.searchWords.value == 'search') { document.searchBox.searchWords.value = ' '; }" type="image"></form></li>
</ul>  <!--[if lte IE 6]></td></tr></table></a><![endif]-->
</div>

Allen:

I'm hoping for the "Portfolio" on my navbar to have two dropdown links to galleries like this:

Portfolio
.............fashion portfolio 1
.............fashion portfolio 2

Very simple. I can't figure out the CSS for this though. Thank you for the help with the html.

Also, my old html search code was just "SMUGSEARCH". That's why the new code looks so fancy. Someday I want my search bar in my footer like on Barb's page-- but I'll save that for another day.

Holy cow! Your website is beautiful! I'm very excited you're helping me out

Originally Posted by dogwood Holy cow! Your website is beautiful! I'm very excited you're helping me out

Thanks very much, but I'm having a terrible time getting
the dropdowns to work in IE after changing the homepage
menu colors. Hope you looked in
Firefox.

I guess after looking at your site I was having trouble imagining
what you're looking for after seeing the two existing galleries under
portfolio.

Are those the fashion portfolio 1 and fashion portfolio 2?
Whatever, the two drops can read fashion portfolio 1 and
fashion portfolio 2.

I'll see if I can get something later and post here.
AL

Originally Posted by Allen Hope you looked in Firefox.

Not yet-- I was too busy looking at bears!

Originally Posted by Allen I guess after looking at your site I was having trouble imagining what you're looking for after seeing the two existing galleries under portfolio.

There's only one gallery under portfolio. I actually just created that category and gallery for this project. Are you maybe getting it mixed up with the galleries under portraits?

Anyway, here's what I'm hoping for (I'm better with pictures than words these days)-- two dropdown links on the navbar that lead to two different galleries (the second to be added once there's a link):

Allen:

Snuck a look at your CSS-- still couldn't figure out what I need here. You have indeed been working hard to make IE work like a real browser!

I love the lightbox code you have in there too! Amazing-- I used to hate lightbox and that code just made me a huge fan-- especially with the faster speeds from the latest update.

Originally Posted by dogwood Allen: Snuck a look at your CSS-- still couldn't figure out what I need here. You have indeed been working hard to make IE work like a real browser! I love the lightbox code you have in there too! Amazing-- I used to hate lightbox and that code just made me a huge fan-- especially with the faster speeds from the latest update.

Man, I had it almost ready to go then my pc caught something and I couldn't get to Smugmug or Dgrin. Finally got it cleared.

One thing I found was it's easier if you remove your |'s between menu boxes and just add left and right borders.

Using Firefox WebDev I have your new test menu html inserted and now
looking at what elements of CSS need to be added to support it. Hopefully
won't be too long.
Al

Originally Posted by Allen Man, I had it almost ready to go then my pc caught something and I couldn't get to Smugmug or Dgrin. Finally got it cleared. One thing I found was it's easier if you remove your |'s between menu boxes and just add left and right borders. Using Firefox WebDev I have your new test menu html inserted and now looking at what elements of CSS need to be added to support it. Hopefully won't be too long. Al

Very, very cool I appreciate this so much Allen! This has been on my website to do list for quite sometime!

Hi Pete,
Don't mean to hijack this thread ....
however was wondering just how you created your 'portfolio' page?
very impressed with it!
thanks,
rich56k

Originally Posted by rich56k Hi Pete, Don't mean to hijack this thread .... however was wondering just how you created your 'portfolio' page? very impressed with it! thanks, rich56k

Rich56k:

Mike Lane helped me out big time. Ironically, I just now am completeing my second side scrolling gallery. They're cool but a bit tedious to code.

EDIT: better include the link, eh?

http://www.digitalgrin.com/showthrea...side+scrolling

Originally Posted by dogwood Rich56k: Mike Lane helped me out big time. Ironically, I just now am completeing my second side scrolling gallery. They're cool but a bit tedious to code. EDIT: better include the link, eh? http://www.digitalgrin.com/showthrea...side+scrolling

Pete,

Thanks for the info & the link!
Mr. Lane has been instrumental in my efforts also,
(along with all the Dgrin Gurus).
Again Thanks!!
rich
ps: this might be a great 'new feature request- new gallery style' eh?
update- i copy/pasted the final 'box' of code from your link, created 'new' gallery imported 4 random pics, replaced gallery '#' & image #'s with mine (note my pics are landscape vs your portrait) and worked great!! THANKS!!
http://rich56k.smugmug.com/gallery/2402153

There's a few things I'm not understanding. In your menu html you have these.
<ul id="navlist">
<li id="link1">
I don't see them anywhere in the CSS and I've never seen this used before.

You also have the search as the last line in your menu html but I only see it
on a couple pages.

I removed the search for your menu and have it looking ok except I can't
get the box spacing.

I saved what I have so far and maybe tomorrow ....
Al

Originally Posted by Allen There's a few things I'm not understanding. In your menu html you have these. <ul id="navlist"> <li id="link1"> I don't see them anywhere in the CSS and I've never seen this used before. You also have the search as the last line in your menu html but I only see it on a couple pages. I removed the search for your menu and have it looking ok except I can't get the box spacing. I saved what I have so far and maybe tomorrow .... Al

Cool-- I appreciate it Allen. You've already been a big help.

The <ul id="navlist"> and the <li id="link1"> are from Mike Lane. He helped me extensively with my navbar and layout and a bunch of other cool things on my site.

Hey Mike, you around? It's morning in England, isn't it?

I used CSS to remove the search bar on the galleries so there's less clutter-- it's just on the main and category pages. If the search bar has to die for now, that's fine. I can address that at another time.

I'll check back in tomorrow-- late though 'cause I have a shoot in the a.m.

Originally Posted by Allen There's a few things I'm not understanding. In your menu html you have these. <ul id="navlist"> <li id="link1"> I don't see them anywhere in the CSS and I've never seen this used before. You also have the search as the last line in your menu html but I only see it on a couple pages. I removed the search for your menu and have it looking ok except I can't get the box spacing. I saved what I have so far and maybe tomorrow .... Al

You can add id's and classes to any element. Sometimes it helps a person figure out what's going on if they use this:

#navlist #link1 {whatever}

Rather than this:

ul li {whatever}

Also you could theoretically run into situations where you want to easily bump up the specificity and having an ID is a great way to do that. And one further advantage of having an ID on the li is that you can specify different things for different pages. So if you want to have your home link highlighted on the homepage and your galleries link highlighted on your galleries page and so on you can just use the built in body classes in combination with the id's of the li's.

It's been too long to know why specifically dogwood's got them. It may have been a case that I just copied and pasted my old code or something.