Slicknav懸在包裝紙上

-3

我如何使橙色菜單與包裝紙一致？我試着玩slicknav.css，但無濟於事。Slicknav懸在包裝紙上

這裏的形象是什麼我談論：

Slicknav代碼

/* 
    Mobile Menu Core Style 
*/ 

.slicknav_btn { position: relative; display: block; vertical-align: middle; float: right; padding: 0.438em 0.625em 0.438em 0.625em; line-height: 1.125em; cursor: pointer; } 
.slicknav_menu .slicknav_menutxt { display: block; line-height: 1.188em; float: left; } 
.slicknav_menu .slicknav_icon { float: left; margin: 0.188em 0 0 0.438em; } 
.slicknav_menu .slicknav_no-text { margin: 0 } 
.slicknav_menu .slicknav_icon-bar { display: block; width: 1.125em; height: 0.125em; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); } 
.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar { margin-top: 0.188em } 
.slicknav_nav { clear: both } 
.slicknav_nav ul, 
.slicknav_nav li { display: block } 
.slicknav_nav .slicknav_arrow { font-size: 0.8em; margin: 0 0 0 0.4em; } 
.slicknav_nav .slicknav_item { display: block; cursor: pointer; } 
.slicknav_nav a { display: block } 
.slicknav_nav .slicknav_item a { display: inline } 
.slicknav_menu:before, 
.slicknav_menu:after { content: " "; display: table; } 
.slicknav_menu:after { clear: both } 
/* IE6/7 support */ 
.slicknav_menu { *zoom: 1 } 

/* 
    User Default Style 
    Change the following styles to modify the appearance of the menu. 
*/ 

.slicknav_menu { 
    font-size:16px; 

} 
/* Button */ 
.slicknav_btn { 
    margin: 5px 5px 6px;  
    text-decoration:none; 
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    background-color: #222222; 
} 
/* Button Text */ 
.slicknav_menu .slicknav_menutxt { 
    color: #FFF; 
    font-weight: bold; 
    text-shadow: 0 1px 3px #000;  
} 
/* Button Lines */ 
.slicknav_menu .slicknav_icon-bar { 
    background-color: #f5f5f5; 
} 
.slicknav_menu { 
    background:#FF6414; 
} 

.slicknav_nav { 
    color:#fff; 
    margin:0; 
    padding:0; 
    font-size:0.875em; 
} 
.slicknav_nav, .slicknav_nav ul { 
    list-style: none; 
    overflow:hidden; 
} 
.slicknav_nav ul { 
    padding:0; 
    margin:0 0 0 20px; 
} 
.slicknav_nav .slicknav_item { 
    padding:5px 10px; 
    margin:2px 5px; 
} 
.slicknav_nav a{ 
    padding:5px 10px; 
    margin:2px 5px; 
    text-decoration:none; 
    color:#fff; 
} 
.slicknav_nav .slicknav_item a { 
    padding:0; 
    margin:0; 
} 
.slicknav_nav .slicknav_item:hover { 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    border-radius: 6px; 
    background:#ccc; 
    color:#fff; 
} 
.slicknav_nav a:hover{ 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    border-radius: 6px; 
    background:#ccc; 
    color:#222; 
} 
.slicknav_nav .slicknav_txtnode { 
    margin-left:15px; 
}

菜單代碼

<ul id="menu"> 
    <li><a href="#">Personal Profile</a></li> 
    <li><a href="#">Portfolio</a></li> 
    <li><a href="#">Technical Skills</a></li> 
    <li><a href="#">Education</a></li> 
</ul>

和主菜單顯示：無當瀏覽器寬度達到一定大小時，彈出slicknav。

來源

2014-02-18 Gareth

使一個http://jsfiddle.net/我們需要看到一些代碼:) –

我試過這樣做，但它很難，什麼樣的代碼？我可以在這裏發佈？ – Gareth

足夠的代碼能夠複製問題。否則，我們只能猜測問題是什麼。是的，你可以在這裏發佈。只需編輯你的問題。 –

LGSon的回答會工作，如果SlickNav是存在於包裹外部的，但是，它可能會更容易爲你的SlickNav預先考慮到包裝的頂部。

$('#menu').slicknav({ 
    prependTo:'#wrapper' 
});

其中「#wrapper」是包裝器元素的選擇器。這將允許SlickNav與其他內容保持在包裝的範圍內。如果這不理想，則修改「.slicknav_menu」的邊距以匹配包裝應該足夠了。

來源

2014-02-19 20:30:49 ComputerWolf

您需要在「slicknav_menu」元素上設置邊距/填充或寬度，使其與包裝寬度相匹配。

slicknav_menu { 
    background:#FF6414; 
    margin: ??;    // same as wrapper 
    padding: ??;    // or padding (same as wrapper) 
    width: ??;    // or width (same as wrapper) 
}"

來源

2014-02-19 19:13:50 LGSon

我做了，但在我的一個CSS'包裝設置爲94％，當瀏覽器在900像素以下，所以它不'工作 – Gareth

Slicknav懸在包裝紙上

回答

相關問題