1

我正在使用我创建的模板创建一个 joomla 网站。在我想创建的页面之一（在内容 div 中）一个垂直菜单以在其右侧显示可点击的内容。

我用自定义 html 制作了一个，我只需在模块中插入 html 代码，然后在文章中插入模块。

我的菜单代码是这样配置的

<div1>
<div2>
</div2>
<div3>
</div3>
</div1>

其中 div2 和 3 都向左浮动，（div2 是宽度为 30% 的菜单，div3 是宽度为 70% 的内容）。我添加了一个 javascript，这样当我单击其中一个菜单时，它只会淡入文本。

基本上我想要的是这个，但没有表格：http://clinica.chip7.pt/servico_diagnostico_gratis.php

4

1 回答 1

2

我根据您的问题举了一个我认为您正在寻找的例子，很难说。

这是演示：http: //jsfiddle.net/tATWE/1/

HTML：

<div id="outer-container">  
    <div id="header">  
        <h1>{ Header }</h1>  
    </div>  
    <div style="clear: both">  
    </div>  

    <div id="top-Nav">  
        <h1>{ Top Navigation }</h1>  
    </div>  
    <div style="clear: both">  
    </div>  

    <div id="left-nav">  
        <h1>{ Left Side Navigation }</h1>  
        <ul>
            <li>Nav Links</li>
            <li>Nav Links</li>
        </ul>
    </div>  
    <div id="content-container">  
        <h1>{ Content }</h1>  
    </div>  
    <div style="clear: both">  
    </div>  

    <div id="footer">  
        <h1>{ Footer }</h1>  
    </div>  
</div>

CSS：

body {  
    margin: 0px;  
    padding: 0px;  
}  

/* h1 tag style */  
h1 {  
    margin: 0px;  
    padding: 0px;  
    font-family: arial;  
    font-size: 140%;  
    color: #fff;  
}  

/* CSS Style Rule for Div having id="outer-container" */  
/* outer-container will hold the whole assembly of  
   nested div overlays. */  
/* It will also center align the design */  
#outer-container {  
    width: 990px;  
    margin: 0 auto;  
}  

/* footer CSS Style Rule */  
#header {  
    width: 990px;  
    height: 90px;  
    background-color: blue;  
}  

/* footer CSS Style Rule */  
#footer {  
    width: 990px;  
    background-color: red;  
}  

/* content-container CSS Style Rule */  
/* It will hold the main content of the page. */  
/* it is the right side column */  
/* in this 2 columns div layout */  
#content-container {  
    width: 730px;  
    height: 400px;  
    background-color: green;  
    margin: 2px 0px 2px 0px;  
    float: left;  
}  

/* left side navigation that is the left side column of */  
/* 2 columns div layout */  
#left-nav {  
    width: 258px;  
    height: 400px;  
    background-color: navy;  
    margin: 2px 2px 2px 0px;  
    float: left;  
}
#left-nav li {  
    color: red;  
}  

/* Top navigation CSS Style Rule */  
#top-Nav {  
    width: 990px;  
    background-color: black;  
    margin: 2px 0px 0px 0px;  
}
于 2013-04-09T19:49:54.767 回答