I'm in the unfortunate position of having to implement a drop-down cascading menu on a site I'm building. I'm looking for a Suckerfish-style solution that is primarily CSS-based and works on a simple set of nested ULs and LIs.
Son of Suckerfish seems like the way to go, but I don't like the way it just disappears the second you move the mouse away, as users with co-ordination difficulties will have a nightmare navigating the site (or just not bother, but since it's a corporate site there are some who will probably have to use whatever I implement).
Neat features that I've not even thought about needing are welcome, but the two main elements I'm looking for are:
Multi-level using a nested UL/LI structure
Small (possibly configurable?) delay before disappearing when the menu is "mouseout"-ed, even if it is provided by some extra JavaScript.
I would strongly suggest that you use superfish, the jQuery adaptation of the suckerfish menu. It has loads of features (and delay is one of them), adds some fancy animation capabilities, and degrades to the normal suckerfish menu gracefully. It also doesn't need any extra markup.
You could use jQuery. Here is an example: http://www.jqueryplugins.com/plugin/47/
You won't be able to get a pure CSS drop down menu with the functionality you require. You'll have to use some kind of Javascript. Either a library like JQuery that has been mentioned or by modifying the Suckerfish code to use onclick instead of onmouseover/out.
But by going an all Javascript route you could be making it easier for one group of people ("users with co-ordination difficulties") but making it difficult for others (anyone with Javascript turned off for some reason).
You may want to look into adding some alternatives - mouse controlled hover menu for those comfortable with the mouse; keyboard based control via access keys and the like for others.
I am using the solution implemented on Steve Gibson's site grc.com. It does everything I need, and uses no javascript. The delay thing you are looking for isn't there however, so you will probably need to add some Javascript for that.
Part of the coordination problem can stem from bad design. Make sure you have fairly large buttons with, if possible, overlap on all sides. Ideally a top nav button would have a drop down menu appearing centered below it (instead of left aligned). Sub-menus of the drop-down would follow a similar pattern. I've found having this level of error padding accommodates uncoordinated users, and saves you the trouble of programming in javascript.
Every site is different of course, so I present this more as an alternative 'what-if' solution.
I can't see a way to add delay outside of JavaScript - but if you're going to use JavaScript you may as well use a JavaScript controlled menu.
If you follow a semantically-correct nav pattern and set it up so it display's normally (e.g. static) when JavaScript is not present you should be fine with whatever you use.
It's all about your target audience - who's larger? JS-disabled or users with co-ordination difficulties? I would guess that the latter require the priority (if not for percentage use then disability laws).
As Lee Theobald said, drop/down need Javascript, and Jquery is a great choice. But in the side of accesibility, take a look at "Listamatic" a great list of menus and special this nested.
My first recomendation echos one already made - Steve Gibson's CSS Menu. It uses no JavaScript, is about as cross-platform compliant as you're going to get, and is relatively simple to implement.
If that doesn't work, my JS-based reccomendation goes to mygosuMenu. I've been using it for quite some time on all my projects prior to finding Steve's menu. Its highly configurable; and style, structure, and the menu code are all seperate. Its a basic HTML Table you can style via CSS to your heart's content.
I've still got two sites using the latter:
Christian Rock group Jesus Joshua 24:15 (be kind on the traffic, the guys are still on shared hosting...)
Eastover Fire Department
For anyone coming to this old thread now I would suggest looking in to various modifications of the bootstrap drop-down menu. For example this:
http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3
Good luck
Related
I'm tasked with evaluating some legacy web pages (classic asp) for accessibility. You can assume the HTML is not perfectly formed and that it's loaded with inline javascript and that we make use of javascript libraries that vomit HTML to create dynamic features. It's a circus in there.
While I recognize that the obvious answer is to re-write the page(s), that's not an option in our given time tables. So I'm trying to find the best way to make the pages work with a screen reader. Here's what I think I know.
We can use JAWS scripting to instruct the browser how to read the page.
We can use ARIA attributes to give the pages better organization and structure.
Specifically, I'm trying to figure out:
Question 1) If a JAWS script is present, will it be used exclusively by the browser/screen reader and ignore any improvements I make in the underling HTML structure?
Question 2) Could some well-place ARIA attributes give the page enough structure so that the default screen reader properties will work in an acceptable manner (without a JAWS script).
Question 3) I suspect the tough answer is that I would need to do both, which I'm trying to avoid because we barely have the capacity to do just one. But we don't want to lose a customer, of course. :-(
Many thanks for any input.
Instead of explaining only to JAWS how to access your pages, use JavaScript to explain it to any Assistive Technology (AT) for the web. I expect the same effort, while it will profit way more users.
In a JAWS script you would need to describe ways to access DOM nodes that are not accessible. That would include
speaking out information that you have to find elsewhere on the page
adding keyboard navigation where it's missing
Both can be done in JavaScript, probably even easier (you'll need to address DOM elements).
What you will need to avoid is restructuring the DOM and changes to classes, since those are most likely used by the scripts that generate them.
But I'd expect that adding attributes and keyboard handlers will do no harm to the existing scripts. Beware of already existing handlers for focus or keyboard events, though.
I would recommend making a list of attributes and handlers you suspect to conflict with the existing scripts, and searching the scripts for these, like onkeypress or onfocus event handlers.
The absolute best way to make your application/site accessible is to use semantic HTML. It doesn't matter if that HTML is generated by asp or jsp or whatever.
If you have a table, use a <table>.
If you have a heading, use an <h2>.
If you have a list, use a <ul>.
Use <section>, <article>, <nav>, <aside>, <header>, <footer>, etc
That's how you create structure on your page that a screen reader user will appreciate.
If you can't use native HTML, then fall back to ARIA, but treat it like salt. A little bit greatly enhances the flavor but too much spoils the meal.
If you can't use a native <h2>, then make sure you use the appropriate role and attributes.
<div role="heading" aria-level="2">this is my custom h2</div>
If you can't use a native <header>, then make sure you use the appropriate role and attributes.
<div role="banner">my header stuff goes in here</div>
I would recommend totally forgetting about JAWS scripts. It doesn't matter if that's what the customer thinks they should focus us. It's not about that customer. It's about that customer's customers. The end users. They should be able to use whatever screen reader they are used to using and most comfortable with. That's the whole purpose of accessibility - making the site usable and accessible by as many people as possible using whatever assistive technology they are used to using.
Following the Web Content Accessibility Guidelines (WCAG) will lead you to that result.
I've recently decided to create a web app to host some algorithms - I normally just create them without care for UI. However this time I need to dive deep into UI. I'm familiar with bootstrap, css, asp.net and have made a good start.
I'm finding it very difficult to deal with asp.net controls in the design view and having too much trouble trying to achieve simple tasks such as moving controls to different areas of the webpage. When I have two textboxes the design view forces one on top of the other leaving me so confused. Then when I try to move my bootstrap button it randomly creates paragraphs and refuses to move the button!
I'm looking for some genuine sincere advise on how I would deal with the design view on asp.net when moving controls and what the best techniques are. Also advice on how to make a modern UI, best techniques (perhaps bootstrap mentions) etc...
I am creating a fairly simple data display app in asp.net (visual studio 2015) - (most of the algorithm complexity is going to be behind the scenes and nothing to do with UI). Comprehensive and detailed advice would be really appreciated. Specifically modern good looking UI in relation to data grids, textboxes for user input (as parameters), dropdowns - you know the typical data app.
I'm sure this will be greatly helpful to many others as well!
Yeah, as I web designer who has had to work with asp.net in the past I completely feel your pain. It's not easy to get a modern look mostly because asp.net isn't a modern tool and kind of has a visual vocabulary all its own.
That said, I found I could get decent results by sticking as close to CSS based solutions as I possibly could. You can see some of those results in the following links:
http://www.design-experiments.com/
http://www.troyjnorris.com/shoppingcart/
I found that a minimalist approach tends to come with the best results.
A good process to follow:
- Build what you want to build.
- Add container divs to make selecting elements easier around your controls. This will greatly improve your ability to position elements the way you want.
- Use your browser inspector to figure out the auto generated element names as they appear on the screen. Getting good selectors is half the battle in CSS.
- Rip out the styling you don't like. Standard reset style sheets won't do here. You'll have to build your own to zero everything out on the elements you want to style so you're not fighting the out of the box look of the controls. Again you have to rely heavly on your inspector in a web browser to see what styles everything is inheriting.
- Use google fonts to define visual style of the page.
- Stick to mostly black or white backgrounds.
- Bootstrap is helpful for a responsive grid, but won't do much good attempting to style most of the elements on a page as they're not meant for that.
- As you might have noticed in the examples above the visual interest comes from elements that are unrelated to the asp.net structure and limitations. So have something like that, even a background image or some paralax so it feels like something is going on on the page.
Hope that helps.
I have previously created buttons and other graphics (footer bars) from within photoshop and then saved them out for web. Should I now be using css to create my buttons for me? I noticed these are quite code heavy.
You don't have to but the reason using css is considered the better way is because you will not need to make an extra http request to get the image. It really is personal preference.
If the design, you previously made, satisfies your goals there is no necessity to change it. But if you want to use advantages of CSS and if you are not scared of some problems with browsers which do not support CSS completely or support it with some bugs, you can create new CSS elements.
Here are some advantages and disadvantages of both ways.
Images
+ cross-browser solution. Easier to make GUI look the same way in all browsers.
- extra requests to the server
- extra traffic downloaded by users
- the page will weight more and load longer time
- much more time needed to make some little changes in the GUI appearance
CSS
+ no extra requests to the server
+ no extra traffic downloaded by users
+ the page will weight less and load faster
+ less time needed to make changes in the GUI appearance
- NOT a cross-browser solution. Harder to make GUI look the same way in all browsers.
As you can see, CSS has more advantages, but it is way harder to make a cross-browser design using it.
P.S. I'm sorry for my poor language.
Generally using code for things like buttons is currently the way to go. Buttons created in photoshop tend to look gimmicky (currently) and, if you look at the majority of websites you'll notice buttons are very clean, usually subtle gradients and slight box-shadows or such. With the benefit of not having an extra http request this gives it even more of an edge to use code to create such things.
There are many tools and pre-made buttons available to help create the buttons.
Twitter Bootstrap buttons are very clean and widely used. (You don't have to use the whole bootstrap system to use them, just look at their code and re-create :))
Or to customise your own button you can use websites such as CSS button generator
Hi for the last month I have started to learn CSS.Fist thing I did is read everything i could find on www.w3school.com , after that I started reading CSS Mastery 2nd edition.I have build a couple of my own websites with succes but I'm still not happy with what I know , I even practiced with the new CSS3 elements.
I've seen alot of cool stuff build using css especialy on http://www.cssplay.co.uk/ but the only problem is the source code is not displayed and I don't know how the bloody things are.A good example is this:
http://www.cssplay.co.uk/menu/tilt.html
And these is only one of the things that I've seen on this website and would like o learn how to build them.
So anyone know any other similar sites that ofer a good explanation on the more advanced stuff about css(not beginer stuff like building some drop down menus , rollover or hover efects )?Any advice is much apreciated thank you!
As already mentioned, tools like Firebug/Chrome Inspector are definite must haves.
I gained the most experience from real world problems with various different browsers. You make a site, it doesn't look so good in a particular browser. So you search on the internet. Find a solution and memorize it. I think that CSS in itself is a fairly simple tool, I class 'advanced' CSS as mastering the various techniques required to make sites work cross browser and in browsers like IE6/IE7+.
Also, Never give up with CSS, if you find a problem try and find an answer. Most of the time, there will be a simple solution.
In general, make sure your CSS is as simple as can be. I generally find that most complicated CSS can be replaced with relatively simple code, and find people get carried away and forget simple techniques to achieve similar solutions. One such problem, would be putting a button on the right hand side of a div, like below:
-----------------------------------------------
| Button |
-----------------------------------------------
You may see that some people will float the button right, adding more complexity than necessary. What ever happened to text-align:right? :-)
Finally, make sure you find a couple of blogs you like, for example http://csstricks.com and read them, taking note of new techniques. Try and master a '2 column layout', understand the difference between block/inline-block/inline, margin collapsing, tables, html forms, IE6/7 hasLayout, the list goes on. Most of which you will cover if you try and make a website template from scratch. Maybe start with an existing site and see if you can achieve the same layout.
I'm not sure with CSS how to learn it's pitfalls without encountering them mistakenly.
It looks like the stylesheet for the maze is located at: http://www.cssplay.co.uk/menu/candr/tilt.css. You can use that against the source code to figure it out.
One of my favorite is A List Apart. Great articles, not only about CSS like I linked, but about web design and more.
Also HTML Dog has some nice CSS entries.
Then, you can find great CSS resources on the w3 site.
Looking for some direction here as I'm running into some migration problems.
We have a legacy application. The 'infrastructure' is running just fine. Business logic and data access layers written in VB calling SQL Server for the database.
I have a LOT of experience writing Winforms (desktop) application and have had no problems. However, the last time I wrote any ASP.NET stuff was in 1.1 (VS.NET 2003).
Among other things, for ASP.NET 2.0 and up, the Grid layout is gone. It's not just a simple case of dropping controls on a form, aligning them, ordering them and working with the code-behind anymore.
The new web-based application is starting out pretty simple. Just a common header (already made a user control for that) and footer with your typical CRUD functions in the middle.
I tried being 'intuative' in using a master page with content place holders but I couldn't get the placeholders to "grow", to say nothing of not being able to put a text box where I wanted one. Oh, I found the option in VS2008 to allow absolute positioning but it only worked for SOME controls - others I had to manually edit the asp tags.
Then I saw examples using div's and tried to implement them but I ended up with results that had objects writing on top of each other. The online help wasn't helpful to say the least.
Does anyone know of a good book, website or tutorial that can give the basics of what I'm looking for? In practice, I'm looking to make simple pages where some objects may have to push others gurther down the y-axis (as in, several comments being made and that section would push the section listing the 'attachments' down further). I have no trouble when it comes to all the other aspects of this application. It just appears that my webforms skills are about 3-4 years out of date.
This isn't going to be some fancy flash/silverlight application - just simple 'data maintenance' to get rid of some ugly and bug-prone processes involving reading common mailboxes and decoding Word files. The new goal is to have a nice weborm with proper validation.
I guess what I'm looking for is a "Webforms for Winforms programmers" book or site.
Help!
Thanks in advance.
The best advice I've heard on learning to use html/css layout goes something like this:
When building a new page, don't try to get all fancy up front. Start by building a very basic, text-only page. It should look like something from 1996- that brief period where everyone had just discovered the web but had not yet started using the table tag for layout- only no comic sans font. Don't use images at this point, unless the image is genuinely a part of the information being conveyed (as opposed to the window dressing to make it look pretty: you can add those later). There will likely be an h1 at the top of the page, and give each sub heading an appropriate hN, but at this point there shouldn't be any layout information in the page at all. The only place you'll have a table tag is if you genuinely have tabular data to show. If it helps you write this code then you can wrap everything in old-fashioned <center> tags for now- just don't forget to remove them later.
Now let's start tweaking the markup a little. Use things like ul (unordered list) for your list of navigation links and label/legend to identify and group your form areas. The general idea here is to have each element on the page encased in the most appropriate html tag, and to use the full set of available tags- each for it's designated purpose.
At this point you have a page that is ideally suited for a screen reader or search engine. By building this page first, you have made SEO and accessibility compliance easy on yourself. Of course those aren't the only requirements, so we're not done yet.
Now you need to identify the different sections of your page, from both the layout and logical perspectives. The page should largely already be divided logically, but you may find a few places where the normal tags don't cut it. You'll also want to group certain elements for layout reasons. Encase each of these areas with a div tag, and give the tag a class name that refers to the purpose for the tag: the group your are creating. This is just another case of using the a tag (the "division" tag) for it's intended purpose. Also, since elements can have more than one class, you may want to think about also grouping your classes logically. For example, you might want to have a separate class that distinguishes the site template from the rest of the page.
By and large this should not have changed the appearance of the page, but now you have something where it should be very easy to start adding styles. At this point you can now start adding images and layout. The goal here, though, is to change the actual markup as little as possible. If you can manage it only add ids and classes, though you will likely need to add an additional span or div that you had not identified earlier, and sometimes you'll need an extra block level element to force a compatible layout across browsers.
If things are done correctly, the result is a page that not only looks good, but is also easier to work with when testing across browsers, will naturally degrade well when a style or javascript feature isn't supported, and scores well for SEO and accessibility. This also makes it easier to have a developer build a simple page that provides a certain level of functionality, which they can this pass off to a separate designer to make it look good.
You may also want to check out A List Apart. This is a great website with lots of "tricks" for using CSS to layout things on the web along with lots of other web oriented content.
Grid positioning was an abomination for websites. Sure it made for an easy transition from those familiar with the WinForms designer, but it produced horride HTML that is nearly impossible to maintain.
The very best resource I can recommend to you is CSS Mastery. You'll need to learn HTML and CSS, but they're quite easy to get into.
By the sounds of it, you're looking for a crash course in HTML ?
the "Design Canvas" of an ASP.NET aspx Page & ascx Control is just HTML tag markup.
If you've no web design experience, I'd recommend starting somewhere like
W3Schools
When Microsoft gave us ASP.NET, they tried to make programming websites, more like programming rich client applications. However, there are a lot of issues you have to deal with, the major one being statelessness, when developing for the web that don't exist when developing a thick client app (WinForms). So the first step is to not think of the two as similar in anyway.
The drag and drop tools are nice, but what you really need to understand is HTML and client server models. HTML will help you understand how things are getting laid out, and client server models are important to understand how data gets to and from the web to the server. If you have developed in ASP.NET 1.1, then things really haven't changed for 2.0. The concepts are the same, just some of the provided controls have changed.
A lot of people were really unhappy with the grid-based layout from 1.1, because it didn't really work in a number of situations. It still has to ultimately render as html, and html just isn't suited to that kind of layout. For example, things might not be ordered properly or pushed off the screen for mobile browsers (iPhone, etc). There's also things like screen readers for the blind. If you work for the government, that 2nd item is a legal requirement rather than just a nice-to-have, and there are a lot of developers who do work for the government.
So ASP.Net 2.0 tried to generate markup that's at least a little nicer for html. The downside is that you actually have to understand html layout now. But, c'mon: you're building a web site. If you can't handle a little html you're in real trouble.
My advice to build one static page using something other than visual studio. Use <input tags rather than server controls on that page and don't actually implement any logic. Use it to understand how your layout will need to work. Once you have that down, it's really easy to duplicate that for your pages in Visual Studio.
This doesn't really belong as a separate answer, but I wasn't sure you were likely to see another comment to my response above.
The normal behavior of all block-level elements, including divs, is for each new element to appear below the previous element. It sounds like you've set position:absolute; on everything, perhaps while playing with the Grid-based layout option in visual studio. Don't do that- it's hijacked the expected behavior and that's why you see everything piled on top of each other.