Fork me on GitHub
Get XOOPS XOOPSXOOPS FAQFAQ ForumsForums NewsNews ThemesThemes ModulesModules
New Posts New Topics All Posts All Forums Index General Modules Themes Development International XOOPS.org

Search

Nominate XOOPS!

Learn XOOPS Core

Donat-O-Meter

Make donations with PayPal!
Stats
Goal: $100.00
Due Date: Aug 31
Gross Amount: $25.00
Net Balance: $23.97
Left to go: $76.03

Donations
Anonymous ($25)Aug-11

Local Support

Advertisement

XOOPS Code hosted on SourceForge

Cumulus Tag Cloud

- 2 2.5 2.6 4 6 Abuse adslight Android AntiHarvesting AntiSpam API Apple Battlefield billige Blocks Bootstrap Captcha cell cent chronolabs CHUNG Clicks content CĂN demo download Dresses evden facebook Fat floor for free Gateway Google Guide herre Home Honeypot HP html5 Human HỘ iPhone jQuery Language List log Loss module modules Monster new newbb news NHÀ online PARK Payment phone PHP Prevention profile project Protector publisher RESIDENCE responsive review Rights rmcommon Room security Sentry site Smartphone Smarty Smoking Spam stem Studio support tag tags tdmcreate template The Theme themes User userlog web weight xoops Xortify XPayment ZendFramework

New Users

Registering user

# 137686

debarshi

Welcome to XOOPS!




Bottom   Previous Topic   Next Topic  Register To Post

(1) 2 3 »


#1 Posted on: 2008/12/2 2:31 Horizontal menu, How? Plz
Hi,

Please tell me how to make an horizontal main menu?

Thank you in advance.



Top

robertelo
Just popping in
Just popping in
Joined:
2008/11/28 13:40
Group:
Registered Users
Posts: 77
(Show More) (Show Less)


#2 Posted on: 2008/12/2 3:48 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

Top


Please support XOOPS & DONATE
Use 2.5.7 | Debugging | Requests | Bugs
Mamba
Moderator
Moderator
Joined:
2004/4/23 13:58
From Ohio, USA
Group:
Webmaster
Registered Users
Designer Group
Posts: 8040
(Show More) (Show Less)


#3 Posted on: 2008/12/2 4:55 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



Top


Still learning CSS and... english
Burning
Theme Designer
Theme Designer
Joined:
2006/8/22 14:44
Group:
Registered Users
Repository Group
Posts: 1109
(Show More) (Show Less)


#4 Posted on: 2008/12/2 5:17 Re: Horizontal menu, How? Plz
Doesn't multimenu have also an option for horizontal menus?

Top


The art of asking questions.
ghia
Community Support Member
Community Support Member
Joined:
2008/7/3 14:19
From Belgium
Group:
Registered Users
Posts: 4946
(Show More) (Show Less)


#5 Posted on: 2008/12/2 10:59 Re: Horizontal menu, How? Plz
but multimenu isn't stable on 2.3.x yet

Top


Never let a man who does not believe something can be done, talk to a man that is doing it.
sailjapan
Moderator
Moderator
Joined:
2005/11/16 5:27
From Osaka
Group:
Registered Users
Posts: 1667
(Show More) (Show Less)


#6 Posted on: 2008/12/2 14:52 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

Top

dbman
Friend of XOOPS
Friend of XOOPS
Joined:
2005/4/28 0:15
From Cape Breton, Nova Scotia
Group:
Registered Users
Posts: 169
(Show More) (Show Less)


#7 Posted on: 2008/12/2 18:34 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



Top

robertelo
Just popping in
Just popping in
Joined:
2008/11/28 13:40
Group:
Registered Users
Posts: 77
(Show More) (Show Less)


#8 Posted on: 2008/12/2 18:45 Re: Horizontal menu, How? Plz
hi,

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

What's your theme ?

Top


Still learning CSS and... english
Burning
Theme Designer
Theme Designer
Joined:
2006/8/22 14:44
Group:
Registered Users
Repository Group
Posts: 1109
(Show More) (Show Less)


#9 Posted on: 2008/12/2 20:43 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.

Top

dbman
Friend of XOOPS
Friend of XOOPS
Joined:
2005/4/28 0:15
From Cape Breton, Nova Scotia
Group:
Registered Users
Posts: 169
(Show More) (Show Less)


#10 Posted on: 2008/12/2 21:14 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.

Top

robertelo
Just popping in
Just popping in
Joined:
2008/11/28 13:40
Group:
Registered Users
Posts: 77
(Show More) (Show Less)




(1) 2 3 »



You can view topic.
You cannot start a new topic.
You cannot reply to posts.
You cannot edit your posts.
You cannot delete your posts.
You cannot add new polls.
You can vote in polls.
You cannot attach files to posts.
You cannot post without approval.
You cannot use topic type.
You cannot use HTML syntax.
You cannot use signature.

[Advanced Search]