XOOPS 
Forum
Forum Index General Forums Community Support Modules Support Themes Support Development International Support Module Hack Reviews Theme Designer Talk
  1. Board index / 
  2. XOOPS Themes and Templates Support forums / 
  3. Theme templates and Smarty help 
  4.  / Horizontal menu, How? Plz
Register
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: 11409

  • 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
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 {
  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 :
<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>

        
        <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
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.
(1) 2 3 »

Login

Register now!  |  Lost Password?

Search

Advanced Search

Recent Posts

Who's Online

368 user(s) are online (229 user(s) are browsing Support Forums)

Members: 0

Guests: 368

more...

Donat-O-Meter

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

Latest GitHub Commits