左侧导航标题

时间:2015-12-06 15:20:29

标签: javascript html css html5 css3

我的HTML模板带有固定顶部菜单标题

现在我需要将顶部菜单标题更改为左侧菜单标题

有没有简单的步骤?

********************************
________________________________
| H |           My             |
| E |       Scroll_able        |
| A |          Page            |
| D            Here            |
| E |                          |
| R |                          |
!______________________________!

********************************    

1 个答案:

答案 0 :(得分:1)

尝试使用:

left: 0;
top: auto;
height: 100%;
width: 100px; /* Or whatever here */

示例



* {margin: 0; padding: 0; list-style: none; text-decoration: none;}
section {position: relative; padding-left: 150px;}
section aside {position: fixed; left: 0; padding: 15px; background-color: #666; color: #fff; height: 100%;}
section aside a {color: inherit; display: block; padding: 5px;}
section aside a:hover {background-color: #fff; color: #000;}

<section>
  <aside>
    <h3>Left Sidebar</h3>
    <nav>
      <ul>
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
      </ul>
    </nav>
  </aside>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet natus dolorum tempora consequatur, magni omnis maxime perferendis similique, dolor eius sapiente optio, officia aliquam necessitatibus, possimus temporibus libero ducimus! Maiores!</p>
  <p>Perferendis quae sint, amet voluptates assumenda est at sapiente! Atque, eligendi explicabo id rerum eos ipsa natus est, reiciendis labore in mollitia ad delectus. Asperiores nihil cum sint explicabo praesentium!</p>
  <p>Ipsa autem harum eum libero, fugiat, commodi dicta, expedita aspernatur minus, delectus eligendi incidunt natus minima mollitia enim. Dicta earum quo, obcaecati voluptate veniam error dignissimos expedita porro reprehenderit architecto?</p>
  <p>Quo dolorum non blanditiis debitis aspernatur earum nulla ut sit unde doloribus? Cumque sed debitis error dolor earum non optio aut nemo, nobis fuga nisi aspernatur quidem dicta ab suscipit.</p>
  <p>Saepe qui voluptates eum iure repellat, eos ut ipsam debitis excepturi, consequuntur tenetur? Corporis quam molestiae doloremque qui quo, rem sint recusandae, molestias culpa iusto reiciendis mollitia alias ipsum veniam.</p>
</section>
&#13;
&#13;
&#13;