bootstrap navbar 問題

css navbar bootstrap

神威 2021-02-19 13:51:13 ‧ 2325 瀏覽

想請教各位大大
我希望navbar做成以下特效，當點到button時，底部會變白色的

<style>
   
nav{
 
background: -webkit-linear-gradient(#00d550,#b9ff00);
background: -o-linear-gradient(#00d550,#b9ff00);
background: -moz-linear-gradient(#00d550,#b9ff00);
background: linear-gradient(#00d550,#b9ff00);

}
 
#navbardrop::after {
    content: '';
    display: block;
    width: 0;
    height:3px;
    background: #00d550 ;
    transition: width 1s;
}

#navbardrop:hover::after {
    width: 100%;
    transition: width 1s;
}

</style> 
<nav class="navbar navbar-expand-xl bg-transparent" id="navbar" style="padding-bottom:17px; padding-left:150px;padding-right:150px;">
	 
	<div class="collapse navbar-collapse mt-3" id="navbarSupportedContent" style="padding-left:50px;"> 
		<ul class="navbar-nav mr-auto">	 		
							<li class="nav-item active dropdown">
								<a class=" nav-link" id="navbardrop" href="rtlist.php?status_title=<?php echo $a=1; ?>">基本資料</a>
							</li>
							<li class="nav-item dropdown">
								<a class=" nav-link" id="navbardrop" href="rtlist_select.php?status_title=<?php echo $a=1; ?>">查詢</a>
							</li>
						 
		</ul>
		 
	</div>
</nav>

目前我只能做出普通的(按下去底還是黃色....
謝謝大家

看更多先前的討論...收起先前的討論...

ccutmis iT邦高手 2 級 ‧ 2021-02-19 14:06:36 檢舉

聊個題外話
style="padding-bottom:17px; padding-left:150px;padding-right:150px;"
用 bootstrap 建議避免用style="...;"這類的寫法，可能會造成一些RWD問題
改成用bs提供的語法來寫較好例如 class="mx-auto p-2"之類的

神威 iT邦研究生 4 級 ‧ 2021-02-19 14:10:03 檢舉

ccutmis大大，了解，這問題日後我會多注意，感謝

神威 iT邦研究生 4 級 ‧ 2021-02-19 14:42:26 檢舉

想問ccutmis大大知道這navbar特效要怎麼用嗎?謝謝

ccutmis iT邦高手 2 級 ‧ 2021-02-19 15:04:22 檢舉

你想做的是按了查詢之後整個nav背景會變色而查詢按鈕背景是白色的嗎? 這有兩種做法，點了查詢會轉址跟點了查詢不會轉址的，看你的源碼上面是有帶連結，按了之後是要轉址嗎?
看能不能給個範例網頁直接看問題出在哪...
-----
還有一個題外話剛瞄到你的 id="navbardrop" 出現二次，記住一個原則:
在同一個頁面 id 只能是獨一無二的，而class可以重覆出現沒關係。

神威 iT邦研究生 4 級 ‧ 2021-02-19 15:09:54 檢舉

ccutmis好:我希望原本在index.php，按了查詢之後轉址到search.php，查詢按鈕變成白底背景(其他按鈕還是橘色，背景也是)

ccutmis iT邦高手 2 級 ‧ 2021-02-19 15:17:35 檢舉

這樣應該不會很難就寫個 .active{background-color:#FFF !important;}之類的css ，然後在search.php裡面的查詢按鈕標千的 class 裡加上 " active"
最簡單的概念是這樣

神威 iT邦研究生 4 級 ‧ 2021-02-19 15:33:52 檢舉

ccutmis我在試試看，謝謝

ccutmis iT邦高手 2 級 ‧ 2021-02-19 16:14:18 檢舉

不客氣~希望有幫助。

神威 iT邦研究生 4 級 ‧ 2021-02-19 16:32:39 檢舉

[ccutmis](/users/20028574)，想請教，如果我把navbar寫在header，寫.active{}所有選項一起變白，還有我使用了白底，也用了style="padding-bottom:0px;"，但他底下還是會有一點點橘色的邊邊削不掉

ccutmis iT邦高手 2 級 ‧ 2021-02-19 17:16:50 檢舉

"還有我使用了白底，也用了style="padding-bottom:0px;"，但他底下還是會有一點點橘色的邊邊削不掉" 像這種我通常會按F12用開發者面板的箭頭點到你說的那個元素看是什麼造成它會有你說的那種情況這個可能是跟你的css寫法有關要真正解決的話有可能需要整段重寫但如果只是要把最底下那部份"吃掉"的話，有個偷吃步你可以參考看看，就是你說的style="padding-bottom:0px;" 改成 style="margin-bottom:-10px;"

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

通靈亡

iT邦高手 1 級 ‧ 2021-02-20 18:45:43

最佳解答

你希望呈現的是類似這個樣子嗎？

左下方與右下方的圓角形狀，如果要用 CSS來實現，可以用偽元素製造一個無色圓矩形，並且在圓矩形的陰影處填色疊上去。
相對的，這個方式有個限制是，無法為每個 item 加上真實的陰影

不過以時間效益來說，用圖片背景來實作這個效果會比較快。

.nav-item.active::before {
  content: "";
  display: block;
  
  width: 50%;
  height: 65%;
  
  position: absolute;
  bottom: 2px;
  left: -50%;
  
  border-bottom-right-radius: 50%;
  box-shadow: 8px 6px 0 0 white;
}
.nav-item.active::after {
  content: "";
  display: block;
  
  width: 50%;
  height: 65%;
  
  position: absolute;
  bottom: 2px;
  left: 100%;
  
  border-bottom-left-radius: 50%;
  box-shadow: -8px 6px 0 0 white;
}

完整範例