创建一个垂直菜单以在其右侧显示内容答案

【问题标题】：Creating a vertical menu to show content on it's right创建一个垂直菜单以在其右侧显示内容
【发布时间】：2013-04-10 03:58:00
【问题描述】：

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

【问题讨论】：

不确定您的问题是什么？
我在下面编辑了我的答案，您可以使用 html
在左侧导航栏中创建可点击的链接

【解决方案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;  
}

【讨论】：

是的，我的网站就是这样。尽管如此，这有点乱，因为我拥有的是几个不同 div 中的所有文本，但是当我单击菜单中的项目时，javascript 会隐藏或显示它们。有没有办法在没有 javascript 的情况下制作它？因为 atm 它只是一个巨大的 html 代码，因为每个菜单中有这么多的文本。 datamaia.pt/index.php/serv 这是我要配置的页面。可以的话就看看吧。