更改導航鏈接到按鈕看起來一樣開放和加載一個外部div

我有導航欄，看起來很多，工作如何我想它，但我希望鏈接改變和/或加載新divs出現在頁面上或可能的模式。我認爲改變按鈕將是最簡單的方法。但理想情況下，我希望按鈕的外觀與鼠標懸停顏色一樣。更改導航鏈接到按鈕看起來一樣開放和加載一個外部div

我的導航欄的代碼是

<nav class = 'navbar navbar-default'> 
<div class='container'> 
    <div class = 'navbar-header'> 
<button type = 'button' class = 'navbar-toggle collapsed' data-toggle = 'collapse' data-target = '#example-navbar-collapse'> 
<span class = 'sr-only'>Toggle navigation</span> 
<span class='icon-bar top-bar'></span> 
<span class='icon-bar middle-bar'></span> 
<span class='icon-bar bottom-bar'></span></button> 
<a class = 'navbar-brand wow zoomIn' href = '#'><img class='img-responsive2'  
      src='http://www.cheekytransport.co.uk/images/new.png' alt='logo' height='52'></a></div> 
<div class = 'collapse navbar-collapse' id = 'example-navbar-collapse'> 
    <ul class='nav navbar-nav navbar-nav'> 
     <li class='non-active'><a href='#'>About</a></li> 
    </ul> 
    <ul class='nav navbar-nav navbar-nav'> 
     <li class='non-active'><a href='#'>Get bids</a></li> 
    </ul> 
    <ul class='nav navbar-nav navbar-nav'> 
     <li class='non-active'><a href='#'>Register company</a></li> 
    </ul> 
    <ul class='nav navbar-nav navbar-nav'> 
     <li class='non-active'><a href='#'>Help</a></li> 
    </ul> 
    <ul class='nav navbar-nav navbar-nav'> 
     <li class='non-active'><a href='#'>Contact</a></li> 
    </ul> 
    <ul class='nav navbar-nav navbar-right'> 
     <li><a href='#'><span class='glyphicon glyphicon-user'></span> Login</a></li> 
    </ul> 
</div> 
</div> 
</nav>

導航欄CSS：

.navbar-default { 
    padding-left:10px; 
    padding-right:10px; 
    border: 0; 
    -webkit-border-radius: 0; 
    -moz-border-radius: 0; 
    border-radius: 0; 
    background-color: #00a3fe; 
    font-size: 14pt;font-weight: 400;} 


.navbar-brand { 
    padding-top: 0; 
    padding-bottom: 0; 
} 
.nav.navbar-nav.navbar-right li a { 
    color: #ffffff; 
} 

.nav.navbar-nav.navbar-nav li a { 
    color: #ffffff; 
} 

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { 
    background-color: #49bdfe; 
    color: #FFFFFF; 
} 

.navbar-toggle, .icon-bar { 
    border:1px solid white; 
    background-color:white; 
}

來源

2017-02-18 Jules

你的意思是 '與標籤'標籤替換'？如果你這樣做了，剛纔複製的CSS。你可以做到這一點伊斯利這樣：

.nav.navbar-nav.navbar-right li a, 
.nav.navbar-nav.navbar-right li button {

有一點要記住：按鈕有一點不同的CSS屬性，比如「綱要」。不要忘記涉及你的CSS的這些屬性。

來源

2017-02-18 19:44:39 TamirNahum

更改導航鏈接到按鈕看起來一樣開放和加載一個外部div

回答

相關問題