我已经找到了代码:http://media02.hongkiat.com/responsive-web-nav/demo/index.html菜单在这里:http://www.hongkiat.com/blog/responsive-web-nav/
我正在尝试用我的菜单来做:
CSS:
<style type="text/css">
#trans-nav {list-style-type: none; height: 40px; padding: 0; margin: 0; }
#trans-nav { list-style-type: none; height: 40px; padding: 0; margin: 0; }
#trans-nav li { float: left; position: relative; padding: 0; line-height: 40px; }
#trans-nav li:hover { background-position: 0 -40px; }
#trans-nav li a { display: block; padding: 0 15px; color: #666666; text-decoration: none; }
#trans-nav li a:hover { background-color:#F36F25; color: #eeeeee; }
#trans-nav li ul { opacity: 0; position: absolute; left: 0; width: 8em; background: #EEEEEE; list-style-type: none; padding: 0; margin: 0; }
#trans-nav li:hover ul { opacity: 1; }
#trans-nav li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#trans-nav li:hover ul li { height: 30px; line-height: 30px; }
#trans-nav li ul li a { background: #EEEEEE; }
#trans-nav li ul li a:hover { background: #666666; color:#EEEEEE; }
#trans-nav li { -webkit-transition: all 0.2s; }
#trans-nav li a { -webkit-transition: all 0.5s; }
#trans-nav li ul { -webkit-transition: all 1s; }
#trans-nav li ul li { -webkit-transition: height 0.5s; }
</style>
HTML:
<ul id="trans-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Widgets</a></li>
<li><a href="#">Thingamabobs</a></li>
<li><a href="#">Doohickies</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
出于某种原因我无法让它工作,我可以做些什么来使我的菜单与该网站上的菜单相同,或者如果这太复杂而无法让我的菜单更改为下拉菜单(选择)屏幕调整大小
最佳答案
您想CSS 媒体查询
媒体查询由媒体类型和至少一个表达式组成,该表达式通过使用媒体特性(例如宽度、高度和颜色)来限制样式表的范围。添加到 CSS3 中的媒体查询可以让内容的呈现根据特定范围的输出设备进行定制,而无需更改内容本身。
更多详情
关于javascript - 在窗口调整大小或移动设备上自动调整导航栏大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15733743/