帶左側標誌的水平液體導航菜單

如何將標誌浮動到水平導航欄左側並使其顯示在液體中similar to this site？帶左側標誌的水平液體導航菜單

我很想找到關於如何做到這一點，但遺憾的是所有我能找到的是橫向菜單的例子本身

2011-02-04 dazza_au

在您發佈的示例中，他們的徽標浮動：左側，頂部導航和菜單浮動：右側。使用Chrome中的「檢查元素」（或您選擇的瀏覽器中的等效項）可以很容易地向您顯示。 – Sean 2011-02-04 01:58:51

感謝堆。我正在使用firefox和firebug來查看代碼，但是當我看到所有不同的元素和他們使用的命名標籤時，它讓我感到困惑。最後我下載了Chrome，它好多了。它突出了整個地段，並在我的筆記本電腦上顯示得更清晰一些。由於螢火蟲，只是給你填充藍色方塊 – 2011-02-07 00:30:07

這是在示例中使用的代碼教程：;）

<html> 
<head> 
<style> 
.header_box_cmg 
{ 
width:100%; 
margin:0auto; 
padding:0; 
height:125px; 
background:#03a691 url(/views/afl/images/bg/bg_header.jpg) top center repeat-x 
} 
.header_cmg 
{ 
width:920px; 
height:125px; 
margin:0auto; 
padding:0 20px; 
overflow:hidden; 
background:transparent url(/views/afl/images/bg/bg_glow.jpg) top center no-repeat 
} 
.top_options 
{ 
float:right; 
display:inline; 
width:50%; 
overflow:hidden; 
margin-top:20px 
} 
.top_options p 
{ 
font-size:1.1em; 
margin:7px 20px 0 0 
} 
.main_nav 
{ 
width:624px; 
height:50px; 
overflow:hidden; 
float:right; 
display:inline; 
margin-top:22px 
} 
.main_nav li 
{ 
float:left; 
display:inline; 
height:50px; 
margin-left:80px 
} 
.main_nav li.first 
{ 
margin-left:0 
} 
.main_nav li a 
{ 
display:block; 
height:50px; 
text-indent: -9999px; 
background:transparent url(/views/afl/images/bg/bg_main_nav.png) 0 0 no-repeat 
} 
#home{width:36px;background-position:0 0;margin-left:} 
#home:hover, body.home #home{background-position:0 -50px} 
#then{width:61px;background-position: -36px 0} 
#then:hover, body.then #then{background-position: -36px -50px} 
#thep{width:61px;background-position: -97px 0} 
#thep:hover, body.thep #thep{background-position: -97px -50px} 
#thea{width:90px;background-position: -158px 0} 
#thea:hover, body.thea #thea{background-position: -158px -50px} 
#cont{width:53px;background-position: -250px 0} 
#cont:hover, body.cont #cont{background-position: -250px -50px} 
</style> 
</head> 
<body> 
<div class="header_box_cmg"> 
    <div class="header_cmg"> home 
    <h1><a href="http://ambassadorsforlife.org/" title="Ambassadors for LIFE"> 
     <img src="/views/afl/images/ambassadors_for_life.png" alt="Ambassadors for LIFE" title="Ambassadors for LIFE" /> 
    </a></h1> 
    <div class="top_options"> 
    <a href="http://ambassadorsforlife.org/become-an-ambassador/" class="btn_become_ambassador">Become An Ambassador</a> 
    <p class="float-right"><a href="http://my.ambassadorsforlife.org/">Sign in to my account</a></p> 
</div> 
<ul class="main_nav"> 
    <li class="first"><a href="http://ambassadorsforlife.org/" id="home">Home</a></li> 
    <li><a href="http://ambassadorsforlife.org/the-need/" id="then">The Need</a></li> 
    <li><a href="http://ambassadorsforlife.org/the-plan/" id="thep">The Plan</a></li> 
    <li><a href="http://ambassadorsforlife.org/ambassadors/" id="thea">Ambassadors</a> </li> 
    <li><a href="http://ambassadorsforlife.org/contact/" id="cont">Contact</a></li> 
    </ul> 
    </div> 
</div> 
</body> 
</html>

來源

2011-03-01 00:16:48 JAiro

帶左側標誌的水平液體導航菜單

回答

相關問題