[TYPO3] LONG: help ! how to get css drop down menus working in typo3 on firefox and internet explorer?
Oliver Rowlands
oliver at liquidlight.co.uk
Sun Apr 22 14:04:13 CEST 2007
Hi Dave,
I've implemented pure CSS drop-down menus in Typo3 using the
'conditional comments' technique in order to bypass IE's ':hover'
limitations. Have a look at the primary navigation (#primaryNavigation)
on the following site:
http://www.spannerworks.com
The advantage of this technique is that it does not require JS at all.
As far as I can remember it works across the board in IE5.5+, Firefox,
Opera & Safari.
Hope this helps,
Oliver
dave typo wrote:
> Hello all, I have struggled with drop down menus in typo3. So thank
> you all in advance for your input and experience.
>
> How can i get a css based drop down menu to work in typo3? It works
> completely fine on a regular html page, but once the page is within a
> typo3 site the dropdown menu no longer works when a user rolls over
> the visible list (the dropdown menu does still work in opera, but not
> in firefox or in internet explorer)
>
> is there any code that needs to be placed within typo3 to get the css
> dropdown rollovers to work? Or is it impossible to use css-based drop
> down menus within typo3?
>
> what I have is a list like this:
> <body>
>
> <div id="total">
> <ul id="nav">
> <li class="middle"><a href="#">Resources</a>
> <ul>
> <li><a href="">Annual Report</a></li>
> <li><a href="">Galleries</a></li>
> <li><a href="">Fact Sheet</a></li>
> <li><a href="">Reports</a></li>
> <li><a href="">Financial Reports</a></li>
> </ul>
> </li>
> </ul>
> </div>
>
> </body>
>
> and then css controlling it (which is placed in the header, but I have
> written it here second for ease of explanation:)
>
> <style>
>
> #total {
> /*this defines the total look of the menu section */
> font-family:Arial, Helvetica, sans-serif;
> background:url(background.gif) repeat-x;
> height:33px;
> width:769px;
> font:bold;
> color:#FFFFFF;
> display:block;
>
> }
>
>
> ul {
> /*this makes it a horizontal menu and removes bullets */
> padding: 0;
> margin: 0;
> list-style: none;
>
> }
>
> /* this is a li class that defines a middle element within the menu */
> .middle{
> font-size:10px;
> font-weight:bold;
> float: left;
> position: relative;
> background:url(tabnohover.gif) repeat-x;
> padding: 10px 10px 10px 10px;
> border-right:solid 1px #000;
> }
> /* and its hover property */
> .middle:hover, .middle.over {
> text-align:left;
> text-decoration:none;
> background:url(tabhover.gif) repeat-x;
> color:#009900;
> float: left;
> position: relative;
> }
>
> .middle ul {
> padding:10px 10px 10px 10px;
> width:120px;
> /* this hides the block of submenu items underneith the main li items */
> display: none;
> position: absolute;
> top: 3.1em;
> left: -1px;
> background:url(tabdrop.gif) bottom left no-repeat;
> border-right:1px solid #000;
>
> .middle:hover ul, .middle.over ul {
> display: block;
> /* when hovering over the middle div of the <li>the ul that
> corresponds underneath appears because the display:none property
> switches to display:block */
> }
>
> /***************************************************/
>
> </style>
>
> the .over property of the css allows the rollovers to work via an
> external javascript file.
>
> this works on a regular page, but not on a typo3 page.
>
>
> the hovers of the middle li property works both in firefox and
> internet explorer WITHIN Typo3, but the block of ul beneath the li
> property DOES NOT DISPLAY WITHIN Typo3.
>
> So, how can I get the
>
> .middle.hover ul {
> display.block;
> }
>
> to work within typo3?? I have no idea why it's not working.
>
>
> thank you for all the help all of you have given me over the past couple
> months.
>
> sincerely,
>
> dave
>
> p.s.
> I am open to alternatives, but the hypernavigation exetension does not
> yeild the correct functionality, nor the look that I am aiming for...
>
> p.p.s
> I have also tried the tutorial on
> http://www.mcuniverse.com/Horizontal-Bulletlist-Menu.57.0.html but
> could not get it working either
>
> THANK YOU again for reading this long email
--
Oliver Rowlands
:: Liquid Light ::
E - oliver at liquidlight.co.uk
W - http://www.liquidlight.co.uk
T - 00 44 (0)845 6 58 88 35
F - 00 44 (0)845 6 58 44 35
More information about the TYPO3-english
mailing list