當屏幕太小時將菜單切換到選項卡圖片

所以現在我有一個工作設置，當導航比屏幕大時，圖片滑塊就會出現。然而，問題在於導航不會很快縮小標誌。我希望它能更加敏感地考慮徽標的大小。當屏幕太小時將菜單切換到選項卡圖片

現在，這是我如何實現這一點。

/* primary navigation 
--------------------------------------------------------------------- */ 
#nav-wrap ul, #nav-wrap li, #nav-wrap a { 
    margin: 0; 
    padding: 0; 
    border: none; 
    outline: none; 
} 

/* nav-wrap */ 
#nav-wrap { 
    position: relative; 
    font: 22px raleway-bold, sans-serif; 
    float: right; 
    margin-top: 36px; 
    margin-right: 20px; 
    z-index: 99999; 
} 

/* hide toggle button */ 
#nav-wrap > a.mobile-btn { 
    display: none; 
    border-radius: 3px; 
} 

ul#nav { 
    min-height: 48px; 
    width: auto; 

    /* left align the menu */ 
    text-align: left; 
} 
ul#nav li { 
    position: relative; 
    list-style: none; 
    height: 48px; 
    display: inline-block; 
} 

/* Links */ 
ul#nav li a { 

/* 8px padding top + 8px padding bottom + 32px line-height = 48px */ 

    display: inline-block; 
    padding: 8px 11px; 
    line-height: 32px; 
    text-decoration: none; 
    text-align: left; 
    color: #14C9CF; 

    -webkit-transition: color .2s ease-in-out; 
    -moz-transition: color .2s ease-in-out; 
    -o-transition: color .2s ease-in-out; 
    -ms-transition: color .2s ease-in-out; 
    transition: color .2s ease-in-out; 
} 

ul#nav li a:active { background-color: transparent !important; } 
ul#nav li:hover > a, 
ul#nav li.current a { color: #fff; } 

/* adds down arrow */ 
ul#nav span:after { 
    width: 0; 
    height: 0px; 
    border: 4px solid transparent; 
    border-bottom: none; 
    border-top-color: #8a8383; 
    content: ''; 
    vertical-align: middle; 
    display: inline-block; 
    position: relative; 
    right: 5px; 
} 

/* Sub Menu 
----------------------------------------------------- */ 
ul#nav ul { 
    position: absolute; 
    top: 100%; 
    left: 0; 
    background: #1f2024; 
    min-width: 100%; 

    border-radius: 0 0 3px 3px; 

    /* for transition effects */ 
    opacity: 0; 
    filter: alpha(opacity=0); 

    -webkit-transition: opacity .25s ease .1s; 
    -moz-transition: opacity .25s ease .1s; 
    -o-transition: opacity .25s ease .1s; 
    -ms-transition: opacity .25s ease .1s; 
    transition: opacity .25s ease .1s; 
} 

/* Third level sub menu 
ul#nav ul ul { 
    position: absolute; 
    top: 0; 
    left: 100%; 

    border-radius: 0 3px 3px 3px; 
} 
*/ 

ul#nav ul li { 
    padding: 0; 
    display: block; 
    text-align: left; 

    /* for transition effects */ 
    height: 0; 
    overflow: hidden; 

    -webkit-transition: height .25s ease .1s; 
    -moz-transition: height .25s ease .1s; 
    -o-transition: height .25s ease .1s; 
    -ms-transition: height .25s ease .1s; 
    transition: height .25s ease .1s; 
} 

/*On Hover */ 
ul#nav li:hover > ul { opacity: 1; filter: alpha(opacity=100); } 
ul#nav li:hover > ul li { 
    height: 42px; 
    overflow: visible; 
    border-bottom: 1px solid #26272C; 
} 
ul#nav li:hover > ul li:last-child { border: none; } 

/* Sub Menu Anchor links */ 
ul#nav ul li a { 
    padding: 6px 15px; 
    margin: 0; 
    white-space: nowrap; 
    font-size: 13px; 
}

你可以看到，它通過這個實現它：

/* hide toggle button */ 
#nav-wrap > a.mobile-btn { 
    display: none; 
    border-radius: 3px; 
}

但它不使用的標誌，知道它開始或停止什麼時候。所以導航會覆蓋在標誌上。有沒有辦法解決這個標誌？

編輯 https://jsfiddle.net/q2ozq1q2/3/

來源

2015-12-13 JP Foster

我建議你添加一些HTML，也許張貼的jsfiddle。我們無法想象您的html看起來像什麼。 –

我把它加在jsfiddle上。請參閱編輯 –

如果您有一個簡化的例子來展示此問題（即較少的CSS，較少的HTML），那麼協助您會更容易。通常，逐步創建簡化（以確保您仍然遇到問題）的行爲實際上可以爲您提供答案（這是一個類似於[rubber ducking]的概念（https://en.wikipedia.org/）維基/ Rubber_duck_debugging））。 –

如果我理解正確的話，你可以在媒體查詢寬度改爲像這樣圍繞990px：（在小提琴線289）

@media only screen and (max-width: 990px) {

來源

2015-12-18 13:00:40 cpalinckx

正是我需要的。最簡單的方法來處理問題，所以你可以得到解決方案。謝謝！ –

嘿較小的屏幕上查看時，U可以同時調整圖像和導航欄：

使用下面的CSS爲例：

img { 
max-width:250px; 
max-height:250px; 
} 

#nav-wrap ul#nav { 
position:absolute; 
width:100%; 
} 

ul#nav ul li a{ 
word-break:break-all; 
width:100%; 
}

來源

2015-12-17 08:55:11

您應該添加一個類爲img標籤 -

header .logo a { 
    display: block; 
    margin: 0; 
    padding: 0; 
    border: none; 
    outline: none; 

} 
header .logo a img{ 
    width: 210px; 
    height: 34px; 
}

來源

2015-12-17 13:48:26

當屏幕太小時將菜單切換到選項卡圖片

回答

相關問題