垂直导航问题

时间：2015-07-26 04:03:51

标签： html css

因此导航栏应该是页面的height并且是固定的，因此即使用户向下滚动页面也会显示。 不过，我的.nav目前看起来像this

非常感谢帮助。此外，在创建响应式网站时，图像大小应该是多少？就像在Photoshop上创建图像一样，画布应该有多大，以确保图像不模糊？

HTML和CSS如下

＆＃13;
＆＃13; 
.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 25%;
  position: fixed;
  top: -15px;
  left: -10px;
}
.nav li a {
  display: block;
  background-color: #232121;
  /*padding-bottom: 73.5px;*/
  padding-left: 25px;
  /*padding-top: 20px;*/
  text-decoration: none;
  color: white;
  font-weight: 600;
  letter-spacing: 2px;
}
.nav li a:hover {
  color: #00b4ff;
  text-decoration: none;
}
.sub-nav {
  list-style-type: none;
  background-color: #232121;
  color: white;
}
.sub-nav li a {
  font-weight: 400;
  letter-spacing: 1px;
}
.sub-nav li a:hover {
  color: #00b4ff;
  text-decoration: none;
  font-weight: 400;
}
＆＃13; 
<ul class="nav">
  <li>
    <a href="index.html">
      <img src="logo1.jpg" alt="logo" class="logo">
    </a>
  </li>
  <li><a href="index.html">HOME</a>
  </li>
  <li><a href="about.html">ABOUT</a>
  </li>
  <li><a href="products.html">PRODUCTS</a>
  </li>
  <li><a href="salesandmotivation.html">SALES AND MOTIVATION</a>
    <ul class="sub-nav">
      <li><a href="salessuccess.html">SALES SUCCESS</a>
      </li>
      <li><a href="motivation.html">MOTIVATION</a>
      </li>
    </ul>
  </li>
  <li><a href="propertyinvestment.html">PROPERTY INVESTMENT</a>
    <ul class="sub-nav">
      <li><a href="listings.html">CURRENT LISTINGS</a>
      </li>
      <li><a href="testimonials.html">TESTIMONIALS</a>
      </li>
    </ul>
  </li>
  <li><a href="contact.html">CONTACT</a>
    <ul class="sub-nav">
      <li><a href="salessuccess.html">SUBSCRIBE</a>
      </li>
    </ul>
  </li>
  <li><a href="index.html">CONNECT</a>
  </li>
  <li>
    <a href="facebook.com">
      <img src="facebook.jpg" alt="facebook" class="facebook">
    </a>
  </li>
  <li>
    <a href="twitter.com">
      <img src="twitter.jpg" alt="twitter" class="twitter">
    </a>
  </li>
  <li>
    <a href="linkedin.com">
      <img src="linkedin.jpg" alt="linkedin" class="linkedin">
    </a>
  </li>
</ul>
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：0)

您的background-color: #232121 .nav li a刚刚更改为.nav而.nav已设置top:-15px，我更改为top:0 }

<强>片段：

＆＃13;
＆＃13; 
.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 25%;
  position: fixed;
  top: 0;
  left: -10px;
  background-color: #232121;
}
.nav li a {
  display: block;
  /*padding-bottom: 73.5px;*/
  padding: 0 25px;
  /*padding-top: 20px;*/
  text-decoration: none;
  color: white;
  font-weight: 600;
  letter-spacing: 2px;
}
.nav li a:hover {
  color: #00b4ff;
  text-decoration: none;
}
.nav li a img {
  max-width: 100%
}
.sub-nav {
  list-style-type: none;
  background-color: #232121;
  color: white;
}
.sub-nav li a {
  font-weight: 400;
  letter-spacing: 1px;
}
.sub-nav li a:hover {
  color: #00b4ff;
  text-decoration: none;
  font-weight: 400;
}
＆＃13; 
<ul class="nav">
  <li>
    <a href="index.html">
      <img src="//lorempixel.com/300/300" alt="logo" class="logo">
    </a>
  </li>
  <li><a href="index.html">HOME</a>
  </li>
  <li><a href="about.html">ABOUT</a>
  </li>
  <li><a href="products.html">PRODUCTS</a>
  </li>
  <li><a href="salesandmotivation.html">SALES AND MOTIVATION</a>
    <ul class="sub-nav">
      <li><a href="salessuccess.html">SALES SUCCESS</a>
      </li>
      <li><a href="motivation.html">MOTIVATION</a>
      </li>
    </ul>
  </li>
  <li><a href="propertyinvestment.html">PROPERTY INVESTMENT</a>
    <ul class="sub-nav">
      <li><a href="listings.html">CURRENT LISTINGS</a>
      </li>
      <li><a href="testimonials.html">TESTIMONIALS</a>
      </li>
    </ul>
  </li>
  <li><a href="contact.html">CONTACT</a>
    <ul class="sub-nav">
      <li><a href="salessuccess.html">SUBSCRIBE</a>
      </li>
    </ul>
  </li>
  <li><a href="index.html">CONNECT</a>
  </li>
  <li>
    <a href="facebook.com">
      <img src="facebook.jpg" alt="facebook" class="facebook">
    </a>
  </li>
  <li>
    <a href="twitter.com">
      <img src="twitter.jpg" alt="twitter" class="twitter">
    </a>
  </li>
  <li>
    <a href="linkedin.com">
      <img src="linkedin.jpg" alt="linkedin" class="linkedin">
    </a>
  </li>
</ul>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我们可以使用更多代码来计算您的特定网站的情况;只是粘贴nav代码并不是非常有用。

话虽如此，让我们保持简单。这是您创建basic fixed sidebar nav的方法。显然很大程度上取决于你的具体代码，但由于我们没有这个，我们只能猜测发生了什么，我猜你没有设置height 100%的父元素上的nav和其他父母的上游body。

如果您提供更多详细信息，或许我们可以详细说明发生了什么。

＆＃13;
＆＃13; 
body {
    height: 100%;
    position: relative;
    margin: 0;
}

main {
    background: red;
    height: 1000px;
    padding-left: 100px;
}

aside {
    background: lightblue;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100px;
}
＆＃13; 
<aside>
    links here
</aside>
<main>
    this is your main content
</main>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

实际上，.nav现在有100％的高度，但问题是它没有背景颜色。你应该设置背景颜色：＃232121;也.nav。 从裁剪的单词开始，你必须给div一个宽度，以确保单词不会超出边界。

.nav {
      background-color: #232121;
      height: 100%;
      width: 225px;
      position: fixed;
      top: 0;
      left: -10px;
      list-style-type: none;
      margin: 0;
      padding: 0;
      background-color: #232121;
}
        
.nav li a {
      display: block;
      background-color: #232121;
      width: 200px;
      /*padding-bottom: 73.5px;*/
      padding-left: 25px;
      /*padding-top: 20px;*/
      text-decoration: none;
      color: white;
      font-weight:600;
      letter-spacing: 2px;
}
        
.nav li a:hover {
      color: #00b4ff;
      text-decoration: none;            
}
        
.sub-nav {
      list-style-type: none;
      background-color: #232121;
      color: white;	
}
         
.sub-nav li a {
      font-weight: 400;
      letter-spacing: 1px;
      padding: 0;
      width: 185px;
}
          
.sub-nav li a:hover {
      color: #00b4ff;
      text-decoration: none;
      font-weight: 400;
}
 <ul class="nav">
        <li><a href="index.html"><img src="logo1.jpg" alt="logo" class="logo"></a></li>
        <li><a href="index.html">HOME</a></li>
        <li><a href="about.html">ABOUT</a></li>
        <li><a href="products.html">PRODUCTS</a></li>
        <li><a href="salesandmotivation.html">SALES AND MOTIVATION</a>
            <ul class="sub-nav"> 
                <li><a href="salessuccess.html">SALES SUCCESS</a></li> 
                    <li><a href="motivation.html">MOTIVATION</a></li>
            </ul>
        </li>
        <li><a href="propertyinvestment.html">PROPERTY INVESTMENT</a>
            <ul class="sub-nav"> 
                <li><a href="listings.html">CURRENT LISTINGS</a></li> 
                    <li><a href="testimonials.html">TESTIMONIALS</a></li>
            </ul>
        </li>
        <li><a href="contact.html">CONTACT</a>
            <ul class="sub-nav"> 
                <li><a href="salessuccess.html">SUBSCRIBE</a></li> 
            </ul>
        </li>
        <li><a href="index.html">CONNECT</a></li>
        <li><a href="facebook.com"><img src="facebook.jpg" alt="facebook" class="facebook"></a></li>
        <li><a href="twitter.com"><img src="twitter.jpg" alt="twitter" class="twitter"></a></li>
        <li><a href="linkedin.com"><img src="linkedin.jpg" alt="linkedin" class="linkedin"></a></li>
</ul>

答案 3 :(得分：0)

编辑你的Css，如：

.nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    height: 100px;
    width: 100%;
    position: fixed;
    left: -10px;
    /*border: 1px solid red;*/
}
.nav li
{
    display: inline;
}
.nav li a {
    background-color: #232121;
    /*padding-bottom: 73.5px;*/
    padding-left: 25px;
    /*padding-top: 20px;*/
    text-decoration: none;
    color: white;
    font-weight:600;
    letter-spacing: 2px;
}

和html文件：

    <!DOCTYPE html>
<html>
<head>
    <title>Learning Input</title>
    <link rel="stylesheet" href="style.css">
</head> 

<body>
    <ul class="nav">
        <li><a href="index.html"><img src="logo1.jpg" alt="logo" class="logo"></a></li>
        <li><a href="index.html">HOME</a></li>
        <li><a href="about.html">ABOUT</a></li>
        <li><a href="products.html">PRODUCTS</a></li>
        <li><a href="salesandmotivation.html">SALES AND MOTIVATION</a>
            <!-- <ul class="sub-nav"> 
                <li><a href="salessuccess.html">SALES SUCCESS</a></li> 
                <li><a href="motivation.html">MOTIVATION</a></li>
            </ul> -->
        </li>
        <li><a href="propertyinvestment.html">PROPERTY INVESTMENT</a>
            <!-- <ul class="sub-nav"> 
                <li><a href="listings.html">CURRENT LISTINGS</a></li> 
                <li><a href="testimonials.html">TESTIMONIALS</a></li>
            </ul> -->
        </li>
        <li><a href="contact.html">CONTACT</a>
            <!-- <ul class="sub-nav"> 
                <li><a href="salessuccess.html">SUBSCRIBE</a></li> 
            </ul> -->
        </li>
        <li><a href="index.html">CONNECT</a></li>
        <li><a href="facebook.com"><img src="facebook.jpg" alt="facebook" class="facebook"></a></li>
        <li><a href="twitter.com"><img src="twitter.jpg" alt="twitter" class="twitter"></a></li>
        <li><a href="linkedin.com"><img src="linkedin.jpg" alt="linkedin" class="linkedin"></a></li>
    </ul>
</body>
</html>
相关问题
最新问题