Horizontal navigation menu?
I've been going through the screencasts and couldn't help but notice that the content of the pages appears to have changed significantly since the screencasts were made, making it a little difficult to follow along.
But the biggest problem I've hit on so far is with the horizontal navigation menu. The screencast instructs us to select 'Navigation main menu items' but this doesn't appear in the dropdown of available items.
I've tried several of the option available and none of them produce a horizontal menu.
Can someone point me in the right direction please?
Cheers,
Paul.
Re: Horizontal navigation menu?
ModNavigationMain and ModNavigationSub have been removed in TL 2.7 as both can be accomplished using the normal ModNavigation and some Start/Stop Level and HardLimit tweaking.
There is no module that creates a horizontal menu as this should be done using CSS.
Re: Horizontal navigation menu?
Hi Flob,
Thanks for the clarification.
I guess my confusion stemmed from the fact that the screens in the screencast are not the same as those in 2.7 and that the final result shows a nicely formatted horizontal menu, whereas using the same CSS as per the screencast ends up with a stacked menu.
Hopefully, it won't be too long before the screencasts are updated for us newbies to follow... ;)
Cheers,
Paul.
Re: Horizontal navigation menu?
There is a wiki article on creating a horizontal suckerfish type menu....
Re: Horizontal navigation menu?
Quote:
Originally Posted by DivTag
Hopefully, it won't be too long before the screencasts are updated for us newbies to follow... ;)
If it worked out for you, you can create an own screencast! Just take care it's close to the "old" one. You might also reuse the video and just update some parts of it …
Re: Horizontal navigation menu?
Quote:
Originally Posted by Freddo
There is a wiki article on creating a horizontal suckerfish type menu....
Can you post a link please ? I cant find any solid documentation.
Re: Horizontal navigation menu?
Quote:
Can you post a link please ?
The suckerfish navigation menu document is here:
http://dev.typolight.org/wiki/typolight ... ishEnglish
However, I am new to typolight, and it is still not clear to me what to do. After step "4. Creating the site structure", it says "Hence follows for Typolight the following HTML-code:". Where do I put this HTML code???
Someone please clarify. Thanks.
Re: Horizontal navigation menu?
Module:Add Module:custom html.
Make sure all tags in that code are in Settings:Security Settings:Allowed html or typolight will strip them from your new module on save.
Then embed that module into your page layout.
Re: Horizontal navigation menu?
I am still unable to get suckerfish style navigation. I start with a clean empty website on a new install. I will try to repeat as best as I can, using TYPOLight 2.7.6, the steps outlined in this tutorial: http://dev.typolight.org/wiki/typolight ... ishEnglish
1. Creating the main navigation module
Layout->Modules->Add module
Name of the module: suckerfish
Module type: CUSTOM HTML (the original tutorial says to put "Navigation menu" here, but above reply says to use "CUSTOM HTML" instead)
The code added to the suckerfish custom html module hard codes the site structure. Here is what it looks like:
Code:
<div class="mod_navigation block">
<ul class="level_1">
<li class="active"><p class="active">welcome page</p>
<li class="submenu">page1
<ul class="level_2">
<li class="submenu">page1.1
<ul class="level_3">[*]page1.1.1[/list]
[*]page1.2[/list]
[*]page2
<li class="submenu">page3
<ul class="level_2">[*]page3.1[/list]
[/list]
<a id="skipNavigation_4" class="invisible" title="skip navigation"></a>
</div>
2. Creating an empty stylesheet
Layout->Style sheets->New style sheet
Code:
Name: suckerfish
Revision date: 2010-02-15 15:31
Media types: screen
.mod_navigation
{
height:300;
}
.mod_navigation p
{
margin-top:0;
padding-top:0;
}
.mod_navigation ul
{
margin-top:0;
padding-top:0;
list-style-type: none;
}
.mod_navigation li
{
width:160px;
position:relative;
float:left;
background-color:#99999;
border-right:1px solid #ffffff;
border-bottom:1px solid #ffffff;
border-left:1px solid #ffffff;
line-height:35px;
}
.mod_navigation li ul
{
left: -1px;
top: 36px;
position:absolute;
display: block;
}
3. Allow html tags in security settings
Settings -> Security settings: Allowed HTML tags (see list):
Code:
<a><abbr><acronym><address><area>[b]<big><blockquote>
<base><bdo><button><caption><code><col><colgroup><dd><div><dfn><dl><dt>[i]<form><fieldset><hr><h1><h2><h3><h4><h5><h6>[i]<img><input><label><legend>[*]<link><map><object>[list=1]<optgroup><option>
<pre><param><q><select><small><span>[b]<sub><sup><style><table><tbody><td><textarea><tfoot><th><thead><tr><tt><u><ul>
4. Creating a page layout
Layout->Page layouts->new layout
Name of the layout: suckerfish
Columns: one
Head section -> Style sheets: suckerfish
Front end modules -> Included modules: Module: suckerfish; Column: main column
Expert settings -> Page template: fe_page
5. Creating the site structure
[attachment=1:163jd1jo]suckerfish_sitestructure.png[/attachment:163jd1jo]
At this point in the tutorial (http://dev.typolight.org/wiki/typolight ... ishEnglish), I am supposed to see something like this on the front end:
[attachment=0:163jd1jo]suckerfish_tutorial_pic1.png[/attachment:163jd1jo]
However, when I go to my site, I see "No pages found". Can you help me see what is wrong?
Re: Horizontal navigation menu?
Ah, my URL was wrong. The site is accessed like this:
Re: Horizontal navigation menu?
Sorry mouton, i may have put you wrong.
I think that code is probably just what is generated by the navigation menu (reflecting the site structure created in Site Structure).
That is: you don't put it anywhere. It is just showing you what needs to be styled with CSS.
I've not made a Suckerfish menu, so please disregard my post.
