0
나는 꽤 많이 보이고 원하는 방식으로 작동하는 navbar가 있습니다. 그러나 링크를 변경하거나 새 div를로드하려고합니다. 페이지 또는 가능한 모달. 나는 단추로 바꾸는 것이 가장 쉬운 방법이라고 생각한다. 하지만 이상적으로 마우스 오버 컬러와 함께 버튼이 링크와 똑같아 보이길 원합니다.내비게이션 버튼을 열어서 같은 모양으로 변경하고 외부 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;
}