html5水平导航与CSS [英] html5 horizontal nav with css

问题描述

我用导航标签制作了一个带有导航标签的html 5导航，并在下面放了一个列表。

1）我怎么能用css使它成为水平？

2）我希望有一个表现：用户向下滚动页面，我的导航栏会粘到

屏幕顶部，这样用户总能看到它，当向上滚动时，它会回到原来的状态

放在标题标记的底部< header>



这里的html代码：

 <  标题 >  
 <   nav  >  
 <   ul  >  
 <   li  > ;  <   a     href   = ＃ > ; 主页<   / a  >  <   / li  >  
 <   li  >  <   a     href   = ＃ > 服务<   / a  >  
 <   ul  < span class =code-keyword>>  
 <   li  >  <   a     href   = ＃ > 下载<   / a  >  <   / li  >  
 <   li  >  <   a     href   = ＃ > 上传<   / a  >  <   / li  >  
 <   / ul  >  
 <   / li  >  
 <   li  >  <   a     href   = ＃ > 产品<   / a  >  
 <   ul  >  
 <   li  >  <   a     href   = ＃ > 实用工具<   / a  >  <   / li  >  
 <   li  >  <   a     href   = ＃ > ; 网络浏览器<   / a  > ;  <   / li  >  
 <   li  >  <   a  < span class =code-attribute>   href   = ＃ > 反病毒<   / a  >  <   / li  >  
 <   / ul  >  
 <   / li  >  
 <   li  >  <   a     href   = ＃  > 新闻<   / a  > ;  
 <   ul   >  
 <   li  >  <   a     href   = ＃ < span class =code-keyword>> 供稿<   / a  >  <   / li  >  
 <   / ul  >  
 <   / li  >  
 <   li  >  <   a     href   = ＃ > 关于我们<   / a  >  <   / li  >  
 <   / ul  >  
 <   / nav  >  
 <   / header  >  

css for header：

标题{
 position：absolute; 
 top： 0 ;剩余
： 0 ; 
宽度：100％; 
身高：100px; 
 
 background-image：url（  texture.jpg）; 
 background-repeat：repeat-x; 
} 

解决方案

我自己解决了



< pre lang =css> header {
position ： 绝对;
top ： 0;
left ： 0;
width ： 100％;
height ： 100px;

background-image < span class =code-keyword>： url（texture.jpg）;
BAC kground-repeat ： repeat-x;
}
< span class =code-leadattribute> nav {
position ： < span class =code-keyword>绝对值;
left ： < span class =code-keyword> 440px;

margin-top ： 49px;
}
nav ul {
position ： relative;
display ： -webkit-box;

border-bottom-color ： ＃000;
list-style ： none;
border ： 0;
}
nav ul li {
width ： 70px;
height ： 35px;
显示 ： block;

background-color ： #fff;
border-right-style ： solid;
border-right-width ： 1px;
text-align ： 中心;
}
nav ul li ul {
display ： none;
height ： 0;
= webkit-transition ： < span class =code-keyword> height 1s;
}
nav ul li：hover {
background -color ： ＃5ea2d8;
}
nav ul li：hover ul {
position ： 绝对;
height ： 100％;
display ： block;

opacity ： < span class =code-keyword> 100％;
}
nav ul li：hover ul li {
width ： 100px;
position ： relative;
top ： 16px;
left ： -55px;

border-right-style ： none;
border-top-style < span class =code-keyword>： solid;
border-top-width ： 1px;
}
nav ul li：hover ul li 。 last {
border-bottom-style ： solid;
border-bottom-width ： 1px;
}
nav a {
position ： relative;
top ： 8px;
text-decoration ： 无;
颜色 ： ＃000;
}
nav a：悬停 {
颜色 ： #fff
}

和滚动功能：

  var  isFixed =  false ; 

< blockquote>（window）.scroll（function（）{
var nav =

（' ＃nav'）;
var scrollTop =

i made a html 5 nav with nav tag and put a list in there like below.
1) how can i make it horizontal with css?
2) i want a performance like: user scrolls down the page and my nav sticks to the
screen top so user always see it and when scrolls up, it turns back in its original
place in bottom of header tag <header>

here's html code:

<header>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Services</a>
                    <ul>
                        <li><a href="#">Download</a></li>
                        <li><a href="#">Upload</a></li>
                    </ul>
                </li>
                <li><a href="#">Products</a>
                    <ul>
                        <li><a href="#">Utilities</a></li>
                        <li><a href="#">Web browser</a></li>
                        <li><a href="#">Anti Virus</a></li>
                    </ul>
                </li>
                <li><a href="#">News</a>
                    <ul>
                        <li><a href="#">Feeds</a></li>
                    </ul>
                </li>
                <li><a href="#">About Us</a></li>
            </ul>
        </nav>
    </header>

css for header:

header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;

    background-image: url("texture.jpg");
    background-repeat: repeat-x;
}

解决方案

i solved it myself

header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;

    background-image: url("texture.jpg");
    background-repeat: repeat-x;
}
nav{
    position: absolute;
    left: 440px;

    margin-top: 49px;
}
nav ul{
    position: relative;
    display: -webkit-box;

    border-bottom-color: #000;
    list-style: none;
    border: 0;
}
nav ul li{
    width: 70px;
    height: 35px;
    display: block;

    background-color: #fff;
    border-right-style: solid;
    border-right-width: 1px;
    text-align: center;
}
nav ul li ul{
    display: none;
    height: 0;
    =webkit-transition: height 1s;
}
nav ul li:hover{
    background-color: #5ea2d8;
}
nav ul li:hover ul{
    position: absolute;
    height: 100%;
    display: block;

    opacity: 100%;
}
nav ul li:hover ul li{
    width: 100px;
    position: relative;
    top: 16px;
    left: -55px;

    border-right-style: none;
    border-top-style: solid;
    border-top-width: 1px;
}
nav ul li:hover ul li.last{
    border-bottom-style: solid;
    border-bottom-width: 1px;
}
nav a{
    position: relative;
    top: 8px;
    text-decoration: none;
    color: #000;
}
nav a:hover{
    color: #fff
}

and for scroll functionality:

var isFixed = false;

(window).scroll(function() { var nav =

('#nav'); var scrollTop =

这篇关于html5水平导航与CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！