I’m going to spend some time with the home page and the horizontal menus now. I believe you were seeking a little fluid action before switching to the slim menus. At this moment, the horizontal menu layout seems to need a bit of work. I want to tinker a bit and see how it plays out.
The slim menu with graphics is relatively simple. The horizontal menu, with its different graphics and all of its sub-menus, is complex. I believe that the best game plan is to code both menus on the page independently and set the unused menu to {display:none}. I can’t see a sensible way to transition from the horizontal menu with dropdowns to the slim menu layout otherwise.
Hey, dude, you drew the pictures!!! The graphics are entirely different. I’m trying to set up a “proof of concept” for you to test. So far, it shows the horizontal menus but no dropdowns. Hopefully, that will be enough to help you decide if your design looks and works as well as you expect it to. Give me another day or so to set that up. I’ll post the code and images in your dropbox.
OK, Ty, I’ve kept you waiting for quite a while. Thank you for your patience. Let me know if this draft comes close to fulfilling your wishes.
FYI: Depending on your browser settings, you may feel like the buttons in the horizontal menu have too much space between them and they don’t compress enough before switching to the slim menu. Trust me that the wide menu is fluid and its compression is limited by the width of the text in the buttons. That said, remember that you have no control over the font-size in the user’s browser. In my PC, for example, the bottom wide menu can’t become much narrower without overflowing the row. (I use Firefox and Verdana 16px as my default settings). Using Chrome at its default settings, the wide menus look “spaced out”. I suggest not narrowing that transition setting.
I tried to tinker with the design of the dropdown menus, but your menu items are not consistently laid out. Since this wasn’t on your “todo” list (and I was just playing), I left it in an “inconsistent” state. You’ll have to restyle the menus to your liking.
There are a few notes at the top of the home page.
Well, this new menu is awesome! I’m learning so much. I have a lot of questions about some things, though. I’ve gone ahead and re-styled and tweaked a lot of everything, though your idea for the color scheme on the wide menus I really liked.
When you’re on the links on the slim menu, go ahead and click/drag and tab the items. I tried to implement the same thing on the child links in the wide menu, but the links just stay red without the background color change (try clicking, dragging, and tabbing through those links).
Also, I noticed that the “general” tab is extremely long on my roommate’s laptop, and I want to divide it in to two columns. You’ll see that I’ve made a feeble attempt with two divs, one with a class #menucolleft, and the other- #menucolright. So, I broke that part on purpose to work on it.
I’ll want to change the visited state for the links to a different kind of gradient (maybe like a velvet) as well as some others.
Also, the bottom “business” menu main list items do not hold their hover state when the child list is displayed.
I am making a header image that will change to a slimmer image splice with a media query when the viewport is slimmer. My test page is located here. The graphic I have designed is located here. You’ll see that I have simply made a containing div and a span that the height can change, but I don’t know exactly how to proceed to achieve the splice effect, while also maintaining image with fluid sizes…
That looks pretty nice on my screen, but I would like to keep the plain black text h1 element hidden away in a lower z-index somehow. Maybe I can figure that out on my own and post the solution.
I would like to make the thinner version scale (if possible) as the page gets more narrow.
If you mean you want to hide the text at smaler widths then just set it to display:none in the media query I gave you. Or reduce the font-size in the media query a little so that it fits on one line at smaller widths.
You would need to use separate images to do this rather than a sprite. Then it would be better to use the image in the html and set its width to 100% and its height to auto (as i did with your star images).
etidd, The code for most of this was already in the CSS and HTML that I sent. Changing the image on the page when the menu is slim requires modifications to the initial CSS on the slim menu CSS, not changing it on the primary CSS. The latter screws up the widemenu layout. I recommend that you restore the original look for the wide menu then lets discuss the look of the head and banner image for the slim menu view.
I’m sorry to backstep, but let’s please fix the <h1> tag and the banner image…
The <h1> tag serves three useful purposes on your page.
Google recognizes it as the keynote of your site.
Users using screen readers can hear it.
Should the banner image go missing, or if a user is browsing with images turned off, it will be visible.
I put that tag at the top of the page and hid it beneath the banner by applying a negative margin-top to the box containing the images. This allows the banner to remain fluid and scale as needed to fit the page. The size of the <h1> text was small enough so it remained hidden in the narrowest view (unless the user’s default font-size were significantly increased).
You have increased the size of the <h1> tag to 3em and deleted the negative margin so it is visible above the banner. It looks rather tacky over that diagonally striped background and pushes the banner down. Your changes affect both the wide and slim menu views.
Which old way? The way with all of the IDs, or the way I had it set up in the draft? I can help you modify the classed styles in the draft, if you would like. I was hoping you might be able to arrange the dropdowns so they used the same pattern of “title > header > links” or thereabouts. Doesn’t matter, I guess. I’m sure whatever you want can be coded.
Yes, that is what I was meaning to convey. The old styles need to be converted/re-written using the > operator and the new targets like you had set up for the new one. I will go ahead and upload the old bar graphics up to the site for this wide menu. I also have to work in the new color themes to the old design.
I was about to put a little question out about the other thread for the logistics site.
