[solved] css menu? problems

[Tieme]

Hello Typo fans,
i have a little problem with the menu.
i want to make this menu --> http://www.t-me.info/typotest/menu/menu.html
i have tryt to modifie it but it wont work for me :S
does someone know how to do that?

Much Thanks

Tieme

[Ben]

I think this will work well with TYPOlight, but you'll need to modify the css selectors in your style sheet to align with what TL renders. You should also assign a css id to your navigation module.

[Tieme]

hello ben, and the other typolight users,

i tried to make the menu.
but it doesent work for me.

i have this code :

Code: Select all

<div id="placemainmenu">

<ul id="mainmenu" class="<?php echo $this->level; ?>">
<?php foreach ($this->items as $item): ?>
<?php if ($item['isActive']): ?>
<li class="active"><?php echo $item['link']; ?><?php echo $item['subitems']; ?></li>
<?php else: ?>
<li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>><a href="<?php echo $item['href']; ?>" title="<?php echo $item['pageTitle'] ? $item['pageTitle'] : $item['title']; ?>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?></a><?php echo $item['subitems']; ?></li>
<?php endif; ?>
<?php endforeach; ?>
</ul>

</div>


and this is the original.

Code: Select all

   <div id="placemainmenu">
      <ul id="mainmenu">
         <li class="active"><a href="index.html">Home</a></li>
         <li><a href="werkwijze.html">Werkwijze</a></li>
         <li><a href="overzicht.html">Kosten</a>
            <ul>
               <li class="top"><a href="pakket1.html">Pakket 1</a></li>
               <li><a href="pakket2.html">Pakket 2</a></li>
               <li><a href="pakket3.html">Pakket 3</a></li>
               <li class="bottom"><a href="onderhoud.html">Onderhoud</a></li>
            </ul>
         </li>
         <li><a href="work.html">Portfolio</a></li>
         <li><a href="contact.php">Contact</a></li>
      </ul>
   </div>


can someone helpt me out with it?

[Vera]

I don't think that template will generate the same output. It will repeat the div in each submenu??

You didn't even need to change the templates at all...

Easiest would be to add a nav module, give it the id of placemainmenu. And then change the css. Figure out which selector targets what part of the original html and then seen how the equal part in the new html can be selected. I took a look at the code and the structure of what you are aiming for is the same structure as TL puts out by default (except tl outputs a span for the active item, that could be changed in the template, or you add an extra selector for the span to the css)

So in short, what do you do:

1. Use the default template
2. Give the nav module the id placemainmenu
3. Build the same menu structure as the example you had
4. Compare the output of tl and adjust the css file. Remember you need to change the selectors only (like #mainmenu li becomes #placemainmenu ul.level_1 li)
5. Get a beer or go to sleep; you're done

[Tieme]

Thanks Vera,

now i'm going to try if i can figure it out what you said.
so thanks i give a update when its done or when i cant figure it out.

[Tieme]

*update :

it works but not 100% i have problems with the class active.

and my submenu is not showing well.

i have figugerd it out that my custom css #placemainmenu { height:44px;} is the problem
that my menu is only showing within that 44px and not outside of that so my submenu is only showing a tiny bit.
when i delete that my submenu is cut at the bottom and you cant see my submenu.
hope someone know something to help me out with thath.

Thanks

for example look at http://typo.t-me.info/

[Vera]

You have basically changed most of the code so it resembles the example. For the active and trail pages you need to add the corresponding selectors to the style they should correnspond to. I didn't find your compressed css easy to read, so don't have the time to tell you where this should be.

The reason the submenu is not showing is probably the dtd you're using. Your example uses a transitional dtd and your website uses a strict dtd. I think TL allows you to change the dtd. If you cannot or do not want to, you have to position the menu, specify a minimum height (and a height for ie6 and older) and use z-inde to make the submenu display on top of the rest.

But this is just my first guess, the problem might still be (solved) elsewhere...

[ramjet]

The Document Type Definition can be changed for each page layout in Page Layouts::Expert Settings::Document Type Definition

[Tieme]

The reason the submenu is not showing is probably the dtd you're using. Your example uses a transitional dtd and your website uses a strict dtd. I think TL allows you to change the dtd. If you cannot or do not want to, you have to position the menu, specify a minimum height (and a height for ie6 and older) and use z-inde to make the submenu display on top of the rest.

But this is just my first guess, the problem might still be (solved) elsewhere...

Hello,

i have changed the Document Type Definitie to xhtml transitional but still not working for me now
i gonna take a look at the menu active.

[Tru]

Hi everyone

The submenu is not showing because of TYPOlight's css definitions. By default block has attribute overflow: hidden, so submenu will not display.

To fix it, simply add to your css file:

Code: Select all

.block {
   overflow: visible !important;
}