作者stilllove56 (鐘愛五六)
看板Web_Design
標題[問題] 關於特效影響版面的問題
時間Wed Oct 23 19:38:33 2013
小弟現在正在自學HTML5
最近遇到一個問題
我參照買的書籍一一去實作
想要將功能結合起來時
卻遇到了特效影響到我版面的配置
原本有一個用JQUERY作的下拉式主選單
$('
#Navigation li').hover(
function(){
$(this).find('.SubMenu').slideToggle();
},
function(){
$(this).find('.SubMenu').slideUp();
}
);
滑鼠移進去下拉的選單出現
整個版面往下移
很不美觀
有嘗試用Z-index來做上下排版
但沒有甚麼作用
還是一樣會版面跑掉
不知道有沒有好方法可以解決
謝謝
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 59.126.204.136
1F：推 bensonuong:Html css？ 10/23 21:16
2F：推 qwer820404:嗯... z-index...確認是在 對的物件裡面設定對的zinde 10/23 21:27
3F：推 akiratw:.submenu 沒有 position: absolute ? 10/23 21:30
4F：推 hit1205:和樓上一樣想到 position: absolute 10/24 01:16
5F：推 sycc:position:relative 也可 10/24 04:05
感謝各位神人解答
將submenu設position:absolute就可以了!!!
relative使用後情況跟未使用前一樣= ="
可使這樣我的z-index設定值就沒有用了....
是因為放在submenu下面的圖片不能跟ol li進行疊合動作嗎?
我之前一直以為是要固定圖片的位置，然後利用疊合方式使submenu可以覆蓋住圖片
結果是要直接改submenu的position
不好意思 小弟才疏學淺
不太明白這樣做的意義到底是?
※ 編輯: stilllove56 來自: 59.126.204.136 (10/24 09:19)
6F：推 qwer820404:也許是你 外層的設定是position:relatvie or absolute 10/24 10:37
7F：→ qwer820404:當你內層的element 設定position的時候 他抓的起始點 10/24 10:37
8F：→ qwer820404:就不一樣了… 排版的觀念?? 10/24 10:37
9F：推 hit1205:呃，你如果拿掉 submenu 的 dispaly: none 就會知道了， 10/24 12:45
10F：→ hit1205:"東西被推下去" 是 submenu 存在時本來就會發生的事情， 10/24 12:45
11F：→ hit1205:jQ 的 slide 只是在幫你做 display 與 height 的控制而已 10/24 12:46
12F：→ hit1205:你可以想像成加了 position: absolute 後會讓 submenu 10/24 12:48
13F：→ hit1205:跑到另一個圖層，而在原本的地方不佔任何位置 10/24 12:48
14F：推 hit1205:感覺原 po 好像需要先深入了解一下 CSS 10/24 12:50
當初CSS真的是只有看一些指令皮毛而已
都只看指令出來的效果，背後的意義不太了解
看來還需要再找本專寫CSS的書來看
排版面這學問真的是博大精深阿= ="
謝謝各位的幫忙!!
※ 編輯: stilllove56 來自: 59.126.204.136 (10/24 14:03)
16F：→ Rplus:上面那個看一看基本的排版就能自己處理了 10/24 14:36
17F：→ Rplus:用css 寫個多階下拉選單的話 應該可以幫忙加強這一部份 10/24 14:37