iT邦幫忙

0

bootstrap navbar 問題

  • 分享至 

  • xImage

想請教各位大大
我希望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 }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

2
通靈亡
iT邦高手 1 級 ‧ 2021-02-20 18:45:43
最佳解答

你希望呈現的是類似這個樣子嗎?
https://ithelp.ithome.com.tw/upload/images/20210220/20120331K47vA3Q5ie.png

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

https://ithelp.ithome.com.tw/upload/images/20210220/20120331surO4wVQYx.png

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

.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;
}

完整範例

神威 iT邦研究生 4 級 ‧ 2021-02-22 08:14:22 檢舉

謝謝通靈亡,我會研究看看

神威 iT邦研究生 4 級 ‧ 2021-02-24 08:53:53 檢舉

不好意思,最近有點忙,拖到現在才回復,謝謝通靈亡㊣浩瀚星空㊣ccutmis我OK了,感謝大家幫忙

ccutmis iT邦高手 2 級 ‧ 2021-02-24 08:58:58 檢舉

不客氣~加油

1

你先去了解一下 bootstrap navbar 的特性。
如果你是直接使用它的話。基本上來說他會幫你做一些class的控制。
如 active 這個class。認真來說你可以不要給。
它會自動處理的。如果你給的話。就會無法處理。

你只要將其對應的class寫好就行。

先去看完 bootstrap navbar 的操作。
你目前是在做惡搞的動作。

看更多先前的回應...收起先前的回應...
ccutmis iT邦高手 2 級 ‧ 2021-02-19 17:20:23 檢舉

㊣星空大㊣ 新年快樂~ 是在惡搞沒錯 然後我是陪著他惡搞...哈哈

神威 iT邦研究生 4 級 ‧ 2021-02-20 08:50:06 檢舉

ccutmis好:改成 style="margin-bottom:-10px;",他底下的橘色線越來越粗了....看來我還是打掉重寫好了

ccutmis iT邦高手 2 級 ‧ 2021-02-20 11:40:34 檢舉

他底下的橘色線越來越粗了....看來我還是打掉重寫好了

下星期一我再來分享個土法煉鋼給你參考,這兩天沒空 XD

神威 iT邦研究生 4 級 ‧ 2021-02-20 11:51:52 檢舉

ccutmis好:底線我已經解決了!!我在active裡面加個height就OK了,不過我的radius有點問題,我一直找不到反弧度(我想往外彎)不知道這樣行不行?附圖!
https://ithelp.ithome.com.tw/upload/images/20210220/20102983x8K6DtGp4V.png
謝謝大大

反弧的處理方式並不太好處理。
因為如果要純用css的話。需要對應多個定位處理才行。

我以前的做法是用4個div處理的。但很麻煩。
後來新的做法則是直接用背景圖透空來處理。
也就是那個白色塊是用圖片來處理的。
這樣就會比較單純。

而且圖片來處理的話,其實效果會更好。

神威 iT邦研究生 4 級 ‧ 2021-02-20 16:41:15 檢舉

㊣浩瀚星空㊣了解,謝謝你的建議

我要發表回答

立即登入回答