Horizontal menu, How? Plz [Theme templates and Smarty help]

1

Horizontal menu, How? Plz

2008/12/2 8:31
robertelo
Just popping in
Posts: 77
Since: 2008/11/28

Hi,

Please tell me how to make an horizontal main menu?

Thank you in advance.

Reply Quote

2

Re: Horizontal menu, How? Plz

2008/12/2 9:48
Mamba
Moderator
Posts: 11521
Since: 2004/4/23

Try http://www.xoopsland.com/xoopsmenus/ from Mr. Reda.

But it looks like it doesn't work right now, so try later

Support XOOPS => DONATE
Use 2.5.11 | Docs | Modules | Bugs

Reply Quote

3

Re: Horizontal menu, How? Plz

2008/12/2 10:55
Burning
Theme Designer
Posts: 1163
Since: 2006/8/22

hi,

You could get a full css menu quickly.

1. style.css, add (1st line):

le="color: #000000"><?php @import url(navig.css);

2. create a navig.css stylesheet in same folder, with this code :

le="color: #000000"><?php #xo-globalnav { clear: both; border: 0px; padding-left: 2.5em; margin: 0; z-index: 5; text-align: center; } * html #xo-globalnav { height: 30px; } #xo-globalnav ul { min-height: 30px; list-style-type: none; padding: 0; margin: 0; z-index: 500; font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif; font-size: 1.25em; font-weight: 700; } #xo-globalnav li { display: inline; float: left; min-height: 26px; position: relative; text-align: left; padding: 5px 14px 5px 14px; margin: 0; font-size: .9em; } #xo-globalnav li ul { width: 128px; height: auto; top: 100%; left: 0px; font-weight: normal; font-size: 1em; border-top: 1px solid #000; padding: 0 2px 0 2px; } #xo-globalnav li ul li { text-align: left; width: 100px; height: auto; min-height: auto; display: block; } #xo-globalnav li.LargeMenu ul li { text-align: left; width: 156px; height: auto; min-height: auto; display: block; } #xo-globalnav ul li a { text-decoration: none; background-color: transparent; font-weight: 700; } #xo-globalnav a:hover { text-decoration: none; } #xo-globalnav li li ul { top: 0; left: 0; } #xo-globalnav li li:hover ul { left: 150px; } #xo-globalnav ul ul, #xo-globalnav ul li:hover ul ul, #xo-globalnav ul ul li:hover ul ul, #xo-globalnav ul ul ul li:hover ul ul, #xo-globalnav ul ul ul ul li:hover ul ul { position: absolute; display: none; } #xo-globalnav li:hover ul, #xo-globalnav ul li:hover ul, #xo-globalnav ul ul li:hover ul, #xo-globalnav ul ul ul li:hover ul, #xo-globalnav ul ul ul ul li:hover ul, #xo-globalnav ul ul ul ul ul li:hover ul { display: block; } #xo-globalnav, #xo-globalnav a, #xo-globalnav a:active, #xo-globalnav a:hover, #xo-globalnav a:visited {} #xo-globalnav ul li ul li { background-color: #3b3b3b; } #xo-globalnav ul li ul li:hover { background-color: #4b4b4b; }

3. Place your horizontal menu in theme.html. With default theme :

Replace :

le="color: #000000"><?php <table cellspacing="0"> <tr id="header"> <td id="headerlogo"><a href="<{$xoops_url}>/"><img src="<{$xoops_imageurl}>logo.gif" width="150" height="80" alt="" /></a></td> <td id="headerbanner"><{$xoops_banner}></td> </tr> <tr> <td id="headerbar" colspan="2"> </td> </tr> </table>

By (to be modify with your own urls):

le="color: #000000"><?php <table cellspacing="0"> <tr id="header"> <td id="headerlogo"><a href="<{$xoops_url}>/"><img src="<{$xoops_imageurl}>logo.gif" width="150" height="80" alt="" /></a></td> <td id="headerbanner"><{$xoops_banner}></td> </tr> <tr> <td colspan="2"> <div id="xo-globalnav" class="x2-nl x2-navigation"> <ul>  <li class="sitemap"><a href="<{xoAppUrl}>" accesskey="a" title="<{$smarty.const.THEME_HOME_DESC}>"><{$smarty.const.THEME_HOME}></a></li> <li><a class="news" href="<{xoAppUrl modules/news/}>" accesskey="" title="<{$smarty.const.THEME_MODULE1_DESC}>"><{$smarty.const.THEME_MODULE1}></a> <ul> <li><a class="news" href="<{xoAppUrl modules/news/index.php?storytopic=2}>" accesskey="" title="<{$smarty.const.THEME_MODULE1_SUB1_DESC}>"><{$smarty.const.THEME_MODULE1_SUB1}></a></li> <li><a class="news" href="<{xoAppUrl modules/news/article.php?storyid=4}>" accesskey="" title="<{$smarty.const.THEME_MODULE1_SUB2_DESC}>"><{$smarty.const.THEME_MODULE1_SUB2}></a></li> <li><a class="news" href="<{xoAppUrl modules/news/article.php?storyid=5}>" accesskey="" title="<{$smarty.const.THEME_MODULE1_SUB3_DESC}>"><{$smarty.const.THEME_MODULE1_SUB3}></a></li> </ul> </li> <li><a class="mydownloads" href="<{xoAppUrl modules/mydownloads/}>" accesskey="" title="<{$smarty.const.THEME_MODULE2_DESC}>"><{$smarty.const.THEME_MODULE2}></a> <ul> <li><a class="mydownloads" href="<{xoAppUrl modules/mydownloads/viewcat.php?cid=1}>" accesskey="" title="<{$smarty.const.THEME_MODULE2_SUB1_DESC}>"><{$smarty.const.THEME_MODULE2_SUB1}></a></li> <li><a class="mydownloads" href="<{xoAppUrl modules/mydownloads/viewcat.php?cid=2}>" accesskey="" title="<{$smarty.const.THEME_MODULE2_SUB2_DESC}>"><{$smarty.const.THEME_MODULE2_SUB2}></a></li> <li><a class="mydownloads" href="<{xoAppUrl modules/mydownloads/viewcat.php?cid=3}>" accesskey="" title="<{$smarty.const.THEME_MODULE2_SUB3_DESC}>"><{$smarty.const.THEME_MODULE2_SUB3}></a></li> </ul> </li> <li><a class="extgallery" href="<{xoAppUrl modules/extgallery/}>" accesskey="" title="<{$smarty.const.THEME_MODULE4_DESC}>"><{$smarty.const.THEME_MODULE4}></a> <ul> <li><a class="extgallery" href="<{xoAppUrl modules/extgallery/public-album.php?id=18}>" accesskey="" title="<{$smarty.const.THEME_MODULE4_SUB1_DESC}>"><{$smarty.const.THEME_MODULE4_SUB1}></a></li> <li><a class="extgallery" href="<{xoAppUrl modules/extgallery/public-album.php?id=14}>" accesskey="" title="<{$smarty.const.THEME_MODULE4_SUB2_DESC}>"><{$smarty.const.THEME_MODULE4_SUB2}></a></li> <li><a class="extgallery" href="<{xoAppUrl modules/extgallery/public-album.php?id=6}>" accesskey="" title="<{$smarty.const.THEME_MODULE4_SUB3_DESC}>"><{$smarty.const.THEME_MODULE4_SUB3}></a></li> <li><a class="extgallery" href="<{xoAppUrl modules/extgallery/public-album.php?id=7}>" accesskey="" title="<{$smarty.const.THEME_MODULE4_SUB4_DESC}>"><{$smarty.const.THEME_MODULE4_SUB4}></a></li> <li><a class="extgallery" href="<{xoAppUrl modules/extgallery/public-album.php?id=8}>" accesskey="" title="<{$smarty.const.THEME_MODULE4_SUB5_DESC}>"><{$smarty.const.THEME_MODULE4_SUB5}></a></li> <li><a class="extgallery" href="<{xoAppUrl modules/extgallery/public-album.php?id=20}>" accesskey="" title="<{$smarty.const.THEME_MODULE4_SUB8_DESC}>"><{$smarty.const.THEME_MODULE4_SUB8}></a></li> </ul> </li> <li><a class="mylinks" href="<{xoAppUrl modules/mylinks/}>" accesskey="" title="<{$smarty.const.THEME_MODULE3_DESC}>"><{$smarty.const.THEME_MODULE3}></a> <ul> <li><a class="mylinks" href="<{xoAppUrl modules/mylinks/viewcat.php?cid=1}>" accesskey="" title="<{$smarty.const.THEME_MODULE3_SUB1_DESC}>"><{$smarty.const.THEME_MODULE3_SUB1}></a></li> <li><a class="mylinks" href="<{xoAppUrl modules/mylinks/viewcat.php?cid=2}>" accesskey="" title="<{$smarty.const.THEME_MODULE3_SUB2_DESC}>"><{$smarty.const.THEME_MODULE3_SUB2}></a></li> <li><a class="mylinks" href="<{xoAppUrl modules/mylinks/viewcat.php?cid=3}>" accesskey="" title="<{$smarty.const.THEME_MODULE3_SUB3_DESC}>"><{$smarty.const.THEME_MODULE3_SUB3}></a></li> <li><a class="mylinks" href="<{xoAppUrl modules/mylinks/viewcat.php?cid=4}>" accesskey="" title="<{$smarty.const.THEME_MODULE3_SUB4_DESC}>"><{$smarty.const.THEME_MODULE3_SUB4}></a></li> <li><a class="mylinks" href="<{xoAppUrl modules/mylinks/viewcat.php?cid=5}>" accesskey="" title="<{$smarty.const.THEME_MODULE3_SUB5_DESC}>"><{$smarty.const.THEME_MODULE3_SUB5}></a></li> </ul> </li> <li><a class="flux" href="<{xoAppUrl modules/flux/}>" accesskey="" title="<{$smarty.const.THEME_MODULE5_DESC}>"><{$smarty.const.THEME_MODULE5}></a> <ul> <li><a class="flux" href="<{xoAppUrl modules/d3pipes/}>" accesskey="" title="<{$smarty.const.THEME_MODULE5_SUB1_DESC}>"><{$smarty.const.THEME_MODULE5_SUB1}></a></li> <li><a class="flux" href="<{xoAppUrl modules/fluxrss/}>" accesskey="" title="<{$smarty.const.THEME_MODULE5_SUB2_DESC}>"><{$smarty.const.THEME_MODULE5_SUB2}></a></li> </ul> </li> <li><a class="contact" href="<{xoAppUrl modules/contact/}>" accesskey="" title="<{$smarty.const.THEME_MODULE6_DESC}>"><{$smarty.const.THEME_MODULE6}></a> <ul> <li><a class="contact" href="<{xoAppUrl modules/liaise/?form_id=2}>" accesskey="" title="<{$smarty.const.THEME_MODULE6_SUB3_DESC}>"><{$smarty.const.THEME_MODULE6_SUB3}></a></li> <li><a class="contact" href="<{xoAppUrl modules/mylinks/submit.php}>" accesskey="" title="<{$smarty.const.THEME_MODULE6_SUB2_DESC}>"><{$smarty.const.THEME_MODULE6_SUB2}></a></li> <li><a class="contact" href="<{xoAppUrl modules/liaise/?form_id=3}>" accesskey="" title="<{$smarty.const.THEME_MODULE6_SUB4_DESC}>"><{$smarty.const.THEME_MODULE6_SUB4}></a></li>  <li><a class="contact" href="<{xoAppUrl modules/liaise/?form_id=1}>" accesskey="" title="<{$smarty.const.THEME_MODULE6_SUB1_DESC}>"><{$smarty.const.THEME_MODULE6_SUB1}></a></li> </ul> </li> <{if $xoops_isadmin}>  <li><a href="<{xoAppUrl admin.php}>" accesskey="" title="<{$smarty.const.THEME_ADMIN_DESC}>"><{$smarty.const.THEME_ADMIN}></a></li> <{/if}> </ul></div> </td> </tr> </table>

Not tested but hope it helps

Still learning CSS and... english

Reply Quote

4

Re: Horizontal menu, How? Plz

2008/12/2 11:17
ghia
Community Support Member
Posts: 4953
Since: 2008/7/3 1

Doesn't multimenu have also an option for horizontal menus?

The art of asking questions.

Reply Quote

5

Re: Horizontal menu, How? Plz

2008/12/2 16:59
sailjapan
Moderator
Posts: 1672
Since: 2005/11/16

but multimenu isn't stable on 2.3.x yet

Never let a man who does not believe something can be done, talk to a man that is doing it.

Reply Quote

6

Re: Horizontal menu, How? Plz

2008/12/2 20:52
dbman
Friend of XOOPS
Posts: 172
Since: 2005/4/28

Mastop Publish has a horizontal menu. It has some basic css configurability (color, background-color, border, etc). Works fine in 2.3.2a

Reply Quote

7

Re: Horizontal menu, How? Plz

2008/12/3 0:34
robertelo
Just popping in
Posts: 77
Since: 2008/11/28

BURNING Thank you i tried your code but it did NOT work.

DBMAN can you please give me a link to download MASTOP PUBLISH as i couldnt find it :(

PS: It is a pity that multimenu isn't compatible with 2.3.2

Reply Quote

8

Re: Horizontal menu, How? Plz

2008/12/3 0:45
Burning
Theme Designer
Posts: 1163
Since: 2006/8/22

hi,

sorry... may you have some css conflicts in style.css about ul {...} or li {...} ?

What's your theme ?

Still learning CSS and... english

Reply Quote

9

Re: Horizontal menu, How? Plz

2008/12/3 2:43
dbman
Friend of XOOPS
Posts: 172
Since: 2005/4/28

Mastop Publish: http://www.mastop.com.br/conteudo/open-source/mastop-publish-english.mstp

You should also post which theme you are using as Burning has suggested. His solution should work as well.

Multimenu (v1.9) does work with 2.3.2 and there is a horizontal dropdown menu type available from the block configuration form.

Reply Quote

10

Re: Horizontal menu, How? Plz

2008/12/3 3:14
robertelo
Just popping in
Posts: 77
Since: 2008/11/28

Thank you I will try all of your suggestions, i use lotr_v2 theme, i sent a pm to Burning, i hope he will read it.

I will let you know.

Reply Quote

Stats
Goal:	$15.00
Due Date:	Jul 31
Gross Amount:	$0.00
Net Balance:	$0.00
Left to go:	$15.00

Horizontal menu, How? Plz

Re: Horizontal menu, How? Plz

Re: Horizontal menu, How? Plz

Re: Horizontal menu, How? Plz

Re: Horizontal menu, How? Plz

Re: Horizontal menu, How? Plz

Re: Horizontal menu, How? Plz

Re: Horizontal menu, How? Plz

Re: Horizontal menu, How? Plz

Re: Horizontal menu, How? Plz

Post Reply

Search

Recent Posts

Re: XOOPS 2.7.1-RC1 Released for Testing

Re: XOOPS 2.7.1-RC1 Released for Testing

Coming soon: fully rewritten PEDIGREE

XOOPS Cocktails available for testing

Quotes module available for testing

mTools available for testing

XOOPS 2.7.1-RC1 Released for Testing

Re: New XOOPS 2.7.0 Documentation in development

New XOOPS 2.7.0 Documentation in development

Re: XOOPS 2.7.0-RC5 Released for Testing

Who's Online

Donat-O-Meter

Latest GitHub Commits

{{ record.sha.slice(0, 7) }} - {{ record.commit.message | truncate }}