Back to basics to show how to use the latest techniques to produce a flyout menu with the widths of the sub levels automatically sized to fit the longest text.
There have been many methods of centering unordered lists of unknown width, but this is the one I have found to be most robust.
As promised, the previous filmstrip gallery rotated into a vertical format with a few enhancements.
A gallery using a horizontal scrolling filmstrip containing negative/positive thumbnails and landscape/portrait large images with show/hide descriptive text.
A dropline with dropdown menu which has widths automatiaclly set to suit content, the top level centered and all sub levels centered beneath the parent item.
A version of my mini tabbed pages with the ability to have a tab open on page entry.
A droplist menu with method of setting the number of columns in each list and the option of a full width bottom bar for extra linking.
An anywidth menu with the top level centered and the sub menus as wide as required with pullup and flyout left/right.
A version 2 of the dropline, dropdown and flyout hybrid menu.
A mixed gallery using just html/css to switch the contents of an 'object'. The content can be text, images, shockwave/flash and quicktime movie.
A three link block of information with rollover effect.
A conversion of the horizontal scrolling gallery into a vertical version.
A multi level dropdown flyout anywidth menu with dropdown and flyouts that are centered beneath the top level links, with the ability to have a left or right flyout.
A dropline anywidth menu with droplines that are centered beneath the top level links which are also centered.
A single level dropdown anywidth menu with dropdown that are centered beneath the top level links.
A photograph gallery using just html/css to switch the contents of an 'object' for browsers that understand and an iframe alternative for IE.
A single level dropdown menu with multi-columns, headings and curved corners using sliding doors techniques for the dropdowns.
A dropdown menu with any width sub menus and the option of left or right dropdown/flyouts.
After much searching of the web and with the arrival of IE8, I now have a method of positioning horizontal menus of unknown width left / center / right in the containing element.
A dropdown menu that uses a table to hold the dropdown information.
A second 'any width' flyout menu, this time with an over run area and gapping between menu items.
Applying the iframe shim fix to the variable width dropdown/flyout menu system. Using expressions to add the iframe and styling.
The fourth in the skeleton menu series restyled to use recent developments to make it work in all versions if IE from IE5.5 to IE8.
A restyled version that allows dropdowns and flyouts to the left and right. Centered top level list and different color sub levels. Even works in IE5.5.
A flyout version of the 'any width' dropdown menu.
A simplified method of producing a centered dropdown and flyout menu with variable widths depending on text content.
A CSS only method of hovering over a horizontal menu link to change the whole menu background image.
A CSS only method of hovering over text OR associated images to highlight both AND grey out other images.
A dropline menu which uses sliding doors tabs for the top level and a horizontal scrolling dropline which has images and caption.
A click version of the Light Box for all browsers except Safari and Chrome
A CSS take on the javascript LightBox using hover over thumbnail images
A photograph gallery with hover to show large images with linking to full size images or another page.
A second version of the tabbed pages with a default page open on entry.
An update to one of my early 'one page' demonstrations to bring it up to date using the latest CSS techniques.
An update to one of my early gallery demonstrations to bring it up to date using the latest CSS techniques.
A centered dropline, dropdown, flyout menu, using the latest centering technique, with current selection option
A centered dropdown menu, using the latest centering technique, with flyout images
A set of 7 variations on the 3 column equal height theme. All full width with header and footer, a mixture of fixed and percentage column widths and no images.
A fluid layout with max/min width, header/footer and multiple percentage columns ALL reaching the footer using NO images.
Tree Frog menu revised to have scrolling sub menu lists to save space.
Applying a simple method of centering single level variable width, float left menus.
At last a stable cross browser method of centering a variable width float left dropdown menu.
Just revisiting an old bug in IE6 for those who are still strugglimg for an answer.
Welcome to the new world where global emergency collides with 21st century sloganism.
With the incredible efforts we’ve seen from healthcare workers during the COVID-19 pandemic, it feels appropriate that the World Health Organisation has made 2020 the Year of the Nurse and Midwife.
This week I went to my first farewell for a co-worker on Zoom.
Much has been written and discussed over the last few months around our present social environment.
Might be a little regression going on at my place during this lockdown.
Perhaps when COVID-19 is done and dusted the Victorian Government might apply some of the same tough, no nonsense attitude towards getting drug drivers off our roads.