Question

我正在使用我创建的模板创建一个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

Answer 1

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

这是演示： 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;  
}

创建一个垂直菜单以显示正确的内容

1 个答案: