(1) 2 3 »
robertelo robertelo
  • Just popping in
  • Just popping in
  • Joined: 2008/11/28 14:40
  • Group: Registered Users
  • Posts: 77
  • Posted on: 2008/12/2 3:31
Horizontal menu, How? Plz #1
Hi,

Please tell me how to make an horizontal main menu?

Thank you in advance.

Mamba Mamba
  • Moderator
  • Moderator
  • Joined: 2004/4/23 14:58
  • From Ohio, USA
  • Group: Webmaster Registered Users Designer Group Super Moderator
  • Posts: 10293
  • Posted on: 2008/12/2 4:48
Re: Horizontal menu, How? Plz #2
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 Burning
  • Theme Designer
  • Theme Designer
  • Joined: 2006/8/22 15:44
  • Group: Registered Users Repository Group
  • Posts: 1163
  • Posted on: 2008/12/2 5:55
Re: Horizontal menu, How? Plz #3
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 ghia
  • Community Support Member
  • Community Support Member
  • Joined: 2008/7/3 15:19
  • From Belgium
  • Group: Registered Users
  • Posts: 4946
  • Posted on: 2008/12/2 6:17
Re: Horizontal menu, How? Plz #4
Doesn't multimenu have also an option for horizontal menus?
sailjapan sailjapan
  • Moderator
  • Moderator
  • Joined: 2005/11/16 6:27
  • From Osaka
  • Group: Registered Users
  • Posts: 1672
  • Posted on: 2008/12/2 11:59
Re: Horizontal menu, How? Plz #5
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 dbman
  • Friend of XOOPS
  • Friend of XOOPS
  • Joined: 2005/4/28 1:15
  • From Cape Breton, Nova Scotia
  • Group: Registered Users
  • Posts: 171
  • Posted on: 2008/12/2 15:52
Re: Horizontal menu, How? Plz #6
Mastop Publish has a horizontal menu. It has some basic css configurability (color, background-color, border, etc). Works fine in 2.3.2a
robertelo robertelo
  • Just popping in
  • Just popping in
  • Joined: 2008/11/28 14:40
  • Group: Registered Users
  • Posts: 77
  • Posted on: 2008/12/2 19:34
Re: Horizontal menu, How? Plz #7
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 Burning
  • Theme Designer
  • Theme Designer
  • Joined: 2006/8/22 15:44
  • Group: Registered Users Repository Group
  • Posts: 1163
  • Posted on: 2008/12/2 19:45
Re: Horizontal menu, How? Plz #8
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 dbman
  • Friend of XOOPS
  • Friend of XOOPS
  • Joined: 2005/4/28 1:15
  • From Cape Breton, Nova Scotia
  • Group: Registered Users
  • Posts: 171
  • Posted on: 2008/12/2 21:43
Re: Horizontal menu, How? Plz #9
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 robertelo
  • Just popping in
  • Just popping in
  • Joined: 2008/11/28 14:40
  • Group: Registered Users
  • Posts: 77
  • Posted on: 2008/12/2 22:14
Re: Horizontal menu, How? Plz #10
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.
How to effectively post a question in the Xoops forums? - Read here...
Design by: XOOPS UI/UX Team