gpt4 book ai didi

css - 在 CSS 中动态调整菜单大小

转载 作者:行者123 更新时间:2023-11-28 12:59:54 26 4
gpt4 key购买 nike

我只是想知道,当用户更改浏览器窗口的大小时,如何动态更改顶部菜单(“线性代数”、“离散数学”)的大小?我试过将宽度更改为百分比,但没有用。

<html>
<head>
<title></title>
<link type = "text/css" rel = "stylesheet" href = "home.css"/>
</head>
<body>
<div id = "menu">
<ul>
<li><a href = "#"> Discrete Maths </a>
<ul>
<li><a href = "#">Link item</a></li>
<li><a href = "#">Link item</a></li>
<li><a href = "#">Link item</a></li>
<li><a href = "#">Link item</a></li>
<li><a href = "#">Link item</a></li>
</ul><!-- end of the inner ul-->
</li><!-- end of the main li-->
</ul><!-- end of the main ul-->

<ul>
<li><a href = "#"> Linear Algebra </a>
<ul>
<li><a href = "#">Link item</a></li>
<li><a href = "#">Link item</a></li>
<li><a href = "#">Link item</a></li>
<li><a href = "#">Link item</a></li>
</ul><!-- end of the inner ul-->
</li><!-- end of the main li-->
</ul><!-- end of the main ul-->

<ul>
<li><a href = "#"> Calculators </a>
<ul>
<li><a href = "#">Link item</a></li>
<li><a href = "#">Link item</a></li>
<li><a href = "#">Link item</a></li>
</ul><!-- end of the inner ul-->
</li><!-- end of the main li-->
</ul><!-- end of the main ul-->

<ul>
<li><a href = "#" id = "search"> Search </a>
<ul>
<li><a href = "#">
<input type = "text" id = "text"></input>
<input type = "button" value = "szukaj"></input>
</a>
</li>
</ul>
</li><!-- end of the main li-->
</ul><!-- end of the main ul-->
</div><!-- end of the menu-->
</body>
</html>

这是我的CSS

body {
background-color: #562500;
background: url('image_for_website.jpg') repeat;
}
#menu {
width: 70%;
height: 35px;
margin-left: auto;
margin-right: auto;
margin-top: -5px;
padding: 3px;
border-radius: 0px 0px 3px 3px;
box-shadow: 1px 2px 3px 2px #1F0000;
-moz-box-shadow: 1px 2px 3px 2px #1F0000;
-webkit-box-shadow: 1px 2px 3px 2px #1F0000;
text-shadow: 1px 1px 1px black;
border-bottom: 1px solid rgba(255,255,255,0.2);
background: rgba(0,0,0,0.2);
}
#menu ul {
margin: 0;
padding: 0;
line-height: 30px;
}
#menu li {
margin: 0px;
padding: 0px;
list-style: none;
float: left;
position: relative;
border-right: 2px solid black;
}
#menu ul li a {
text-align: center;
font-family: "Comic Sans MS", cursive, sans-serif;
text-decoration: none;
height: 30px;
width: 234px;
display: block;
color: rgba(255,255,255,1);
height: 39px;
}
#menu ul ul {
position: absolute;
visibility: hidden;
line-height: 40px;
top: 39px;
}
#menu ul li: hover ul {
visibility: visible;
background: rgba(51,23,0,1.0);
}
#menu ul li: hover ul li {
border: 1px inset black;
margin: 0px -1px;
}
#menu ul li: hover ul li a: hover {
background: rgba(64,21,0,0.5);
}

在这里 fiddle :http://jsfiddle.net/fTe8V/

最佳答案

你可以使用 jQuery

$(window).resize(function(){
// You could do some checks here to see what size the window is
var height = $(this).height();
$(menu).css('height','20px'); // Set the height of the menu
});

关于css - 在 CSS 中动态调整菜单大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16225512/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com