1
robertelo
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.


2
Mamba
Re: Horizontal menu, How? Plz
  • 2008/12/2 9:48

  • Mamba

  • Moderator

  • Posts: 11366

  • Since: 2004/4/23


Tryhttp://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.10 | Docs | Modules | Bugs

3
Burning
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):
@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

4
ghia
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?

5
sailjapan
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.

6
dbman
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

7
robertelo
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


8
Burning
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

9
dbman
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.

10
robertelo
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.

Login

Who's Online

89 user(s) are online (62 user(s) are browsing Support Forums)


Members: 0


Guests: 89


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Mar 31
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits