xoops forums

robertelo

Just popping in
Posted on: 2008/12/2 3:31
robertelo
robertelo (Show more)
Just popping in
Posts: 77
Since: 2008/11/28
#1

Horizontal menu, How? Plz

Hi,

Please tell me how to make an horizontal main menu?

Thank you in advance.

Mamba

Moderator
Posted on: 2008/12/2 4:48
Mamba
Mamba (Show more)
Moderator
Posts: 10356
Since: 2004/4/23
#2

Re: Horizontal menu, How? Plz

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

But it looks like it doesn't work right now, so try later
Please support XOOPS & DONATE
Use 2.5.8 | Debug | Requests | Bugs

Burning

Theme Designer
Posted on: 2008/12/2 5:55
Burning
Burning (Show more)
Theme Designer
Posts: 1163
Since: 2006/8/22
#3

Re: Horizontal menu, How? Plz

hi,

You could get a full css menu quickly.

1. style.css, add (1st line):
@import url(navig.css);


2. create a navig.css stylesheet in same folder, with this code :
#xo-globalnav {
  
clearboth;
  
border0px;
  
padding-left2.5em;
  
margin0;
  
z-index5;
  
text-aligncenter;
}

html #xo-globalnav {
  
height30px;
}

#xo-globalnav ul {
  
min-height30px;
  list-
style-typenone;
  
padding0;
  
margin0;
  
z-index500;
  
font-family'Trebuchet MS''Lucida Grande'VerdanaArialSans-Serif;
  
font-size1.25em;
  
font-weight700;
}

#xo-globalnav li {
  
displayinline;
  
floatleft;
  
min-height26px;
  
positionrelative;
  
text-alignleft;
  
padding5px 14px 5px 14px;
  
margin0;
  
font-size.9em;
}

#xo-globalnav li ul {
  
width128px;
  
heightauto;
  
top100%;
  
left0px;
  
font-weightnormal;
  
font-size1em;
  
border-top1px solid #000;
  
padding0 2px 0 2px;
}

#xo-globalnav li ul li {
  
text-alignleft;
  
width100px;
  
heightauto;
  
min-heightauto;
  
displayblock;
}

#xo-globalnav li.LargeMenu ul li {
  
text-alignleft;
  
width156px;
  
heightauto;
  
min-heightauto;
  
displayblock;
}

#xo-globalnav ul li a {
  
text-decorationnone;
  
background-colortransparent;
  
font-weight700;
}

#xo-globalnav a:hover {
  
text-decorationnone;
}

#xo-globalnav li li ul {
  
top0;
  
left0;
}

#xo-globalnav li li:hover ul {
  
left150px;
}

#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 {
  
positionabsolute;
  
displaynone;
}

#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 {
  
displayblock;
}

#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 :
<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">&nbsp;</td>
    </
tr>
  </
table>


By (to be modify with your own urls):
<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>

        <!-- 
menu in anonymous mode-->
        <
li class="sitemap"><a href="<{xoAppUrl}>" accesskey="a"  title="<{$smarty.const.THEME_HOME_DESC}>"><{$smarty.const.THEME_HOME}></a></li>
        

        <
li><class="news" href="<{xoAppUrl modules/news/}>" accesskey="" title="<{$smarty.const.THEME_MODULE1_DESC}>"><{$smarty.const.THEME_MODULE1}></a>
        <
ul>
                <
li><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><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><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><class="mydownloads" href="<{xoAppUrl modules/mydownloads/}>" accesskey="" title="<{$smarty.const.THEME_MODULE2_DESC}>"><{$smarty.const.THEME_MODULE2}></a>
        <
ul>
                <
li><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><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><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><class="extgallery" href="<{xoAppUrl modules/extgallery/}>" accesskey="" title="<{$smarty.const.THEME_MODULE4_DESC}>"><{$smarty.const.THEME_MODULE4}></a>
        <
ul>
            <
li><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><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><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><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><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><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><class="mylinks" href="<{xoAppUrl modules/mylinks/}>" accesskey="" title="<{$smarty.const.THEME_MODULE3_DESC}>"><{$smarty.const.THEME_MODULE3}></a>
        <
ul>
            <
li><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><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><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><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><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><class="flux" href="<{xoAppUrl modules/flux/}>" accesskey="" title="<{$smarty.const.THEME_MODULE5_DESC}>"><{$smarty.const.THEME_MODULE5}></a>
        <
ul>
            <
li><class="flux" href="<{xoAppUrl modules/d3pipes/}>" accesskey="" title="<{$smarty.const.THEME_MODULE5_SUB1_DESC}>"><{$smarty.const.THEME_MODULE5_SUB1}></a></li>
            <
li><class="flux" href="<{xoAppUrl modules/fluxrss/}>" accesskey="" title="<{$smarty.const.THEME_MODULE5_SUB2_DESC}>"><{$smarty.const.THEME_MODULE5_SUB2}></a></li>
        </
ul>
    </
li>

        <
li><class="contact" href="<{xoAppUrl modules/contact/}>" accesskey="" title="<{$smarty.const.THEME_MODULE6_DESC}>"><{$smarty.const.THEME_MODULE6}></a>
        <
ul>
                <
li><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><class="contact" href="<{xoAppUrl modules/mylinks/submit.php}>" accesskey="" title="<{$smarty.const.THEME_MODULE6_SUB2_DESC}>"><{$smarty.const.THEME_MODULE6_SUB2}></a></li>
            <
li><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><class="contact" href="<{xoAppUrl modules/MadLiens/}>" accesskey="" title="<{$smarty.const.THEME_MODULE6_SUB5_DESC}>"><{$smarty.const.THEME_MODULE6_SUB5}></a></li> -->
            <
li><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}>

        <!-- 
additional link if I am administrator -->
        <
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

ghia

Community Support Member
Posted on: 2008/12/2 6:17
ghia
ghia (Show more)
Community Support Member
Posts: 4946
Since: 2008/7/3 1
#4

Re: Horizontal menu, How? Plz

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

sailjapan

Moderator
Posted on: 2008/12/2 11:59
sailjapan
sailjapan (Show more)
Moderator
Posts: 1672
Since: 2005/11/16
#5

Re: Horizontal menu, How? Plz

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.

dbman

Friend of XOOPS
Posted on: 2008/12/2 15:52
dbman
dbman (Show more)
Friend of XOOPS
Posts: 171
Since: 2005/4/28
#6

Re: Horizontal menu, How? Plz

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

robertelo

Just popping in
Posted on: 2008/12/2 19:34
robertelo
robertelo (Show more)
Just popping in
Posts: 77
Since: 2008/11/28
#7

Re: Horizontal menu, How? Plz

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

Burning

Theme Designer
Posted on: 2008/12/2 19:45
Burning
Burning (Show more)
Theme Designer
Posts: 1163
Since: 2006/8/22
#8

Re: Horizontal menu, How? Plz

hi,

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

What's your theme ?
Still learning CSS and... english

dbman

Friend of XOOPS
Posted on: 2008/12/2 21:43
dbman
dbman (Show more)
Friend of XOOPS
Posts: 171
Since: 2005/4/28
#9

Re: Horizontal menu, How? Plz

Mastop Publish: http://www.mastop.com.br/conteudo/ope ... stop-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.

robertelo

Just popping in
Posted on: 2008/12/2 22:14
robertelo
robertelo (Show more)
Just popping in
Posts: 77
Since: 2008/11/28
#10

Re: Horizontal menu, How? Plz

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.