Hello there, Can anyone help please i merely can’t seem to get an answer for this question anywhere. I would like to create my own ring menu’s, rollovers and many others with complete design freedom and small code. Flash is great but it allows me complete freedom, creating a food selection in photoshop operates great but im unclear how to place the slice on the inside an ap-div. Is usually there
another method i can try with little code and design and style freedom. So far Flash works great it brings some code for it and i’m sure if this is good way to achieve this.
There has to be a better system
Countless thank’s, this would help a great deal of.
As with the majority of things, menu design calls for tradeoffs. Flash is harmful both accessibility-wise and in terms of search engines if used for possibilities. The XHTML+CSS+Javascript combination does limit your design and style freedom, but carries the advantage of being well-understood plus well-followed by serps and by display screen readers and these kinds of.
Also keep in mind total design flexibility isn’t necessarily an excellent. Menus on websites are the way they are for just a good reason most likely — often because it has been confirmed to be the best way to structure them. Total design freedom can lead to nasty things including Mystery Meat Map-reading and its ilk.
Thank’s Shadowfiend, i am aware of Flash is certainly not SEO friendly and it is a shame interms of creating your own menu design that may be simpathetic and approptiate for you to an overall website design. I’m really searching for another alternative, sure CSS/HTML/JS is definatley what you want just wish i had more creative flexibility. Would you point out Importing a Photoshop Slice of a menu into a Div not just a good approach
This will depend. Sometimes it’s very good, sometimes it is not. Really, the problem is: is it an excellent menu. Is it pretty is usually a secondary concern in comparison to that. If it’s just a good menu, then ask yourself if you actually do the item in XHTML/CSS/JS. The answer, by the means, is that you can apply most things using that combination. This does leave out 3d effects and such generally, however.
When you present your pattern or something similar it is possible to probably get quite a few advice on the way to divide it upward and implement it using standard net technologies.
Concerning attached a jpeg mockup of a home page i always created in Pen. The menu is simple using a 40% oppacity jiggle over state, along with a brown hit state, the menu type is supposed to be tightly kerned together with little leading. I opt to keep menus simple but i love to have freedom in the choice of Font as well as Font control. The Footer acts as a secondary navigation technique that links to the main menu, however while you rollover the sub headings more info moves upwards within a semi transparent box that could have extra hyperlinks. I can transform this page right into a standard html internet page by #wrapping the whole layout and establishing Divs inside. I’m unsure how to make the menu, the footer menu’s and create the stroked lines inside the logo. The logo inside the bottom left corner acts like a home button through many of the pages. I’d like to do as much as possible in CSS/XHTML/JS and keep the code clean in addition to simple but i’m not sure what i can/can’t complete without resorting to help PS Slicing and also Flash. I’d prefer that page to fill your entire screen.
Thank’s Shadowfiend, I’m thinking i need to learn Javascript any help woul be greatley prized.
" Pleased New Year "
The menu around the right is straightforward. You might have got to either play having padding/margins or apply absolute positioning, however it should be straightforward to get it where you desire. Then play having line-height and letter-spacing properties to acquire the look on the letters right.
For that bottom menu, originally, I would recommend getting it to drop down before you decide to get it to open upwards. It will keep things better. Play with that: hover pseudoclass in CSS as a way to get things that will change on are positioned. Basically I could recommend you make each element of height X (say, 200px) along with overflow set to hidden. Then, any time someone hovers about it, set its height to car and set overflow to auto, which should display every one of the rest.
When you finally get there, you can aquire more advanced. Start a brand-new thread if any of this is unclear to ensure others will help you with more particular problems.
Keep in mind the way to try and do things in general in XHTML+CSS could be to keep the XHTML describing the structure of your page, with nothing with regards to background images or what brand new, and then using CSS recreate appropriate background images within the appropriate elements. You possibly can refer to these by id or class, though for you personally by id will most likely be most useful.
Thank’s Shadowfiend, plainly where to choose a specific font of my own choice (menu only), would i need to create the list and rollover reports in PS as images and insert into a good ap div to postition anywhere within my #wrapper and also subsequent div. I understand your method and it’s also the most complient way to accomplish this but am post then only restricted to a minimal ammount with ordinary typefaces. In my example relating to used Swiss African american although Helvetica and Arial would have been a better choice because all users could have these fonts mounted, there are a great number of great typefaces we would prefer to use than Hel and Arial which are almost identical anyway. I’m not sure the direction to go as Typography is vital to me.
Typography is indeed vital, and I be aware that completely. You have a couple of ways of achieving your typography on the web. The simplest for you personally is to develop just the text portions on the transparent background for their various states. Then you certainly save these to PNG files (which help alpha transparency).
And then, you can utilize CSS replacement to take text that exists, and therefore searchable by serps, with a background image instead. The classical knack of doing this would be to set the background-image for your element and after that give it a tremendously negative text-indent value (such as -2000em) that means that the actual browser-rendered text seriously isn’t visible at just about all. This lets a person’s typography shine by. Since the text is for a transparent background, the normal background image comes up from behind to add everything that just isn’t the text once more.
Meantime, to handle your own rollovers, you just adjust the background image from the CSS: hover says. You can utilize the technique described around Fast Rollovers Without Preload to attain the rollovers which has no flashing due for you to browser image-loading delays.
MODIFY: FYI, a more difficult but slightly cooler technique of achieving your typography will be using sIFR.
Wonderful, thank’s Shadowfiend this really is very helpfull and answers a lot of my questions, many any tutorials within the PNG to CSS alternative method i just want to make sure i do that right.
Countless thank’s.
View this article about Accessible Image Substitute. You can for those intents and requirements ignore the note about IE5, as the fraction of IE5 users on line nowadays is minimal.
This will not be what you’re after, but I utilize Opencube – http: //www. opencube. com/index. asp – and I develop image based solution within that in order that I can create my own ring images and are positioned images. It’s SEO helpful and – these people say – W3C validates if done correctly (I’m still doing that one). This software also enables submenus.
Would you neat little instrument. Hadn’t seen the item before. Cool that will it’s Flash-based, far too, so you don’t need to download anything to use it.
Thank’s for that tip jj1, will probably dwnld and no problem it a chance looks good.
Shadowfiend, the articles about Accessible IR and sFIR are excellent every one three great possablities.