Hello,
I have had a lot of issues finding a menu that will fit my needs. I finally gave up and downloaded a program that will create menus. I still need to pay for it as it is a trial so I wanted to test it out first.
I can create the menus just fine. What happens though is I expect the menus to transform from a desktop menu to a mobile menu when the container becomes small enough that the menu wraps.
What is happening is the menus are only transforming after the end two buttons have already wrapped down.
If anyone knows what the heck I can do to fix this I would go ahead and purchase the full version of the software so I can have better templates.
On a side note my old website used a pure javascript / images menu set in a table. Never had any issues with that for many years. If there are better suggestions than just pure css I am open to suggestions.
When I decided to go css/responsive I did not know the navigation would be the hardest part.
You have your <nav> set to 80% width, which means that there is insufficient room for it all to appear on one line even at a viewport width of ~800px - which is before your media query rule would kick in.
I tried playing with those numbers but even when I made them different I still got the same results. Maybe because of what @TechnoBearsays about 80% container.
I have read a lot of tutorials over the past few days and even built a couple from them. I ran into the same issues it must have something to do with 80% setting.
Java is not an issue, I was just looking to avoid it if possible. Just thought maybe css was the way to go.
My original site is run with a java menu that attaches to images. That is still in use until I get the new site going.
Alignment has been my biggest downfall with css as I am so use to table structured layouts.
Maybe there is a better way than what I have tried.
What I want in the end is for my main page container to appear within the center of the viewport using 80% of the available space up to a limit of around 1200px. The sections in the main container should all be block centered with none of the sections going byond 700 or so pixels. The section can be wider but then needs margins or padding to keep the text area to a small enough size to keep the text lines from being too long on wide screens.
On non mobile friendly sites I simply did a div align center placed a centered table with a fixed width. All was fine with that until high resolution screens and mobile.
So now I am trying to accomplish the same with adaptive responsive techniques.
By the way my old java menu was great. The links sat in an external js file. Changing that changed every page on the site like css does for pages.
That is a nice menu. I could probably use it, only would need to make words bigger. The site caters to retirees. Actually I could even use a menu like the one here on the top right of Sitepoint if I just add the word menu next to it so some of the older (meaning some of the 80’s up users) crowd that have not experienced that type of menu yet could find it.
So then I need to figure out if there is a better way to align my page and find a java assisted menu if the one @TechnoBear suggested does not work out.
Other than making sure I have a useable sitemap what else should I do if I do add java assisted navigation?
The basic rule is this: everything that’s accessible from the menu must also be accessible without it.
The usual way to achieve that is to make sure that the top-level links still function as links (so the menus are a progressive enhancement from a static list of links), and to ensure that you have other forms of navigation – a sitemap, sidebars, in-page links and so on, that provide access to all the same pages.
As far as JS goes, there are two reasons why you need JS for menus:
The second point is about mouse navigation being inherently sloppy, e.g if your mouse moves briefly off the menu because your hand wobbled a bit, the menu shouldn’t close. JS menus use timers to buffer this movement, but that’s not possible with CSS.
And here I was thinking that moving to CSS for navigation was the better thing to do. The menu you suggested looks good, you said it is CSS with a Java component. I can go there or if you think something else would work better then great. I do have a site map setup in an ordered list just like the drop-down is setup so that is not an issue. One thing I did like about my current java menu is the links are all in a separate js control file. So changing the links will fix every link it the site that refers to the code in the js. That is a big time saver. The code however is from 2002 and I need something a little newer.
Now one last question. You and @RyanReese mentioned the 80% settings on my container pose a problem with the break points. If I want to maintain a fully centered wrapper with the sections inside not to exceed 1200 pixels and everything inside the containers to be block centered with the text not to exceed a preset width like for example text lines no longer than 700 pixels to keep text lines in check what should I change there?
Looking forward to your alignment suggestions and menu suggestions. Just getting started again for the night.
They aren’t tolerant to user navigation because no developers are smart enough to do that.
Doesn’t mean it’s impossible. You are confusing failings in the language with failings in the developer.
Javascript should not be used as the main crutch for navigations. It should be an accessory you add on. CSS can do the job just fine. There are many times where people think Javascript is the only way to do something, and due to lack of CSS knowledge, they pass by it. This happens so often, not just with this example. CSS is powerful.
So guys, let me try to put these comments into perspective.
In this thread I been have trying to figure out what to do with my menu.
I was originally leaning toward pure css even got a program to build
one but still in demo mode, not paid for yet.
Got a suggestion of the menu by @PaulOB that may work for my needs.
Just not sure where the java included resides with that one. Do I
download it or is is stored in a cdn?
I also have an example from @Erik_J that would fit my needs as I
like to square off my website, but I don’t see where that suggestion
will convert to a mobile menu in a responsive way.
I also have a couple of links from my first thread as a newbie to
the forum with some menu links which I have looked at but not
decided on yet as I saw the post after getting the program and
trying to work that out here.
So with all of those points in mind what is my best way to go on proceeding with my menu layout?
One last thing as from earlier in this post is there any way someone can tell me a better way to align my base settings to get the results I am looking for, or am I doing that correctly.
This is my goal:
You RyanReese and TechnoBear mentioned the 80% settings on my container pose a problem with the break points. If I want to maintain a fully centered wrapper with the sections inside not to exceed 1200 pixels and everything inside the containers to be block centered with the text not to exceed a preset width like for example text lines no longer than 700 pixels to keep text lines in check what should I change there?
That’s not entirely true. This works OK, although the layout is pretty odd for a multi-level drop-down.* I’ve used a variation of it for just a single level dropdown and it was fine. http://css-class.com/articles/ursidae/bears5ddh-kbaccess.htm
(*As a regulart keyboarder, I’m so surprised when things do work with keyboard on sites I visit, I’m pretty forgiving of layout anomalies. Shouldn’t be that way, I know - but that’s life. )
If you mean this menu (which is easily keyboard accessible) then the jquery file can be accessed from the cdn or you can download it locally if you want it under your control.
I have veered away from hover menus as even I find them awkward to use and awkward to then switch into click menus for mobile. Click menus make more sense and are much easier to use and of course a necessity for mobile.
Hay TechnoBear,
I just came back here. I found my first mistake in alignment which was instead of sizing my wrapper/container I was sizing the elements contained within instead.
Anyway I found a great tutorial today that seems to be giving me all of the details on how to align up a css page in great details. If the end result comes out great I shall post a link here to help others with the same issue.
Yes PaulOB that is the one. Do you consider that a hover menu, click menu or both? This is my first new menu in years and would like to do it once and forget about it until it breaks.
