[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 :

<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']; ?>
<?php else: ?>
<li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>>"<?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']; ?><?php echo $item['subitems']; ?>
<?php endif; ?>
<?php endforeach; ?>[/list]

</div>

and this is the original.

	<div id="placemainmenu">
		<ul id="mainmenu">
			<li class="active">Home
			[*]Werkwijze
			[*]Kosten
				<ul>
					<li class="top">Pakket 1
					[*]Pakket 2
					[*]Pakket 3
					<li class="bottom">Onderhoud
				[/list]
			
			[*]Portfolio
			[*]Contact
		[/list]
	</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[/*:m:1gp8l3qe]
2. Give the nav module the id placemainmenu[/*:m:1gp8l3qe]
3. Build the same menu structure as the example you had[/*:m:1gp8l3qe]
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)[/*:m:1gp8l3qe]
5. Get a beer or go to sleep; you're done[/*:m:1gp8l3qe]

[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:

.block {
   overflow: visible !important;
}

[Tieme]

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:

.block {
   overflow: visible !important;
}

Thanks This is working for me :D

[Tru]

To make active menu item working, copy file /system/modules/frontend/templates/nav_default.pl to /templates/ and replace it's code with:

<ul class="<?php echo $this->level; ?>">
<?php foreach ($this->items as $item): ?>
<?php if ($item['isActive']): ?>
<li class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>">"<?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']; ?><?php echo $item['subitems']; ?>
<?php else: ?>
<li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>>"<?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']; ?><?php echo $item['subitems']; ?>
<?php endif; ?>
<?php endforeach; ?>[/list]

Then simply modify your menu.css:

#placemainmenu ul.level_1 li:hover,#placemainmenu ul.level_1 li.active{background:url(../tl_files/t-me/images/menu_left.png) no-repeat;}
#placemainmenu ul.level_1 li:hover a,#placemainmenu ul.level_1 li:hover a:link,#placemainmenu ul.level_1 li:hover a:visited, #placemainmenu ul.level_1 li.active a{text-decoration:none;color:#4b4b4b;background:url(../tl_files/t-me/images/menu_right.png) no-repeat 100% 0;}

Should do the trick.

[Tieme]

Hello Tru

Thank u very much
it has done the trick.

maybe I am very annoying now but I had still a question.
if I klick a menu item in my sub-menu is it possible that my level_1 menu is active?

for example when I click pakket 1, pakket 1 is active but can not pakket 1 but kosten be active?

i hope u know what i mean.

(my english is not that good)

thanks

[Tru]

No problem, you're not annoying but curious :D and that's good!

When the child record is active, its parent is getting .trail class. So you need to modify your css like this:

#placemainmenu ul.level_1 li.trail,
#placemainmenu ul.level_1 li:hover,#placemainmenu ul.level_1 li.active{background:url(../tl_files/t-me/images/menu_left.png) no-repeat;}

#placemainmenu ul.level_1 li.trail a,
#placemainmenu ul.level_1 li:hover a,#placemainmenu ul.level_1 li:hover a:link,#placemainmenu ul.level_1 li:hover a:visited, #placemainmenu ul.level_1 li.active a{text-decoration:none;color:#4b4b4b;background:url(../tl_files/t-me/images/menu_right.png) no-repeat 100% 0;}

[Tieme]

Hello tru.

i have changed it but only my right side is active.
can you see if i did it rong at the css?
i have a sreenshot of my css as attachment.

Thanks

[Tru]

Hi Tieme

You forgot to put "a" in second record:

#placemainmenu ul.level_1 li.trail,

should be

#placemainmenu ul.level_1 li.trail a,

[Tru]

By the way, if anyone is interested in implementing dropdown menu, I have written a short tutorial here - http://blog.qzminski.com/2010/03/jquery ... typolight/

[Vera]

haha, I was just gonna come back and say overflow should probably be set to visible. But still, I cannot directly see why the example menu does work (no overflow visible), that's why I first thought of something else. Again, I can hardly read the css becaus it is all on one line per block.

[Tieme]

hey tru,

thanks for the help.
i dident see the a sorry,
sorry but one more question my submenu is also active can i disable that or something?

thanks