将图像添加到引导下拉菜单
Posted
技术标签:
【中文标题】将图像添加到引导下拉菜单【英文标题】:Adding an image to bootstrap dropdowns 【发布时间】:2014-10-26 15:37:12 【问题描述】:在 Bootstrap3 中将图像添加到默认导航栏下拉菜单的最佳方法是什么?我想在下图中重新创建布局,其中图像填充到下拉菜单中项目的右侧。有什么想法吗?
编辑:我计划在移动设备上隐藏图像以获得更好的可用性,所以我只希望在桌面上使用这种布局。
这是a fiddle 我目前所处的位置
.dropdown-menu
padding-right: 150px; /* width of img */
position: relative;
.dropdown-menu:after
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 150px; /* width of img */
background: url(http://placehold.it/150x220) center;
background-size: cover;
【问题讨论】:
查看我编辑的答案!现在它的工作! 【参考方案1】:你会这样做:
.dropdown-menu
padding-right: 100px; /* width of img */
position: relative;
.dropdown-menu:after
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 100px; /* width of img */
background: url(YOUR URL) center;
background-size: cover;
技巧很简单。您扩展右侧下拉列表的填充以为元素腾出空间,然后在它之后使用您的图像创建伪元素。
如果你想让它只显示在桌面上,只需将它包裹在正确的@media query.
中
【讨论】:
你的意思是你希望每个下拉菜单有不同的背景?您可以使用 attr(data-image) 作为 css 属性值并为每个 .dropdown-menu div 设置它。【参考方案2】:试试这个:link to bootply(更新)
HTML:
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<div class="col-md-10">
<li><a href="#">Longer menu item</a></li>
<li><a href="#">More longer menu item</a></li>
<li><a href="#">More more longer menu item</a></li>
<li><a href="#">More more more longer menu item</a></li>
<li><a href="#">More more more more longer menu item</a></li>
</div>
<div class="col-md-2 image .hidden-xs .hidden-sm">
<img src="http://placehold.it/150x220">
</div>
</ul>
</div>
添加类 .hidden-xs 和 .hidden-sm 以便在小型设备中不显示
CSS:
.image
position:relative;
right:0px;
padding:0 5px;
margin:0;
.image img float:right;
【讨论】:
这不适用于字符串长度较长的菜单项bootply.com/9eb2ZdCBRo @nicogaldo 这也有效!问题:嵌套在 ul 中的 div 是否被接受?【参考方案3】:它的工作!查看演示 Fiddle!
Fiddle Demo
html
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown with Image 1 <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Menu Item 1</a>
<img src="http://placekitten.com/g/200/300" class="navimg">
</li>
<li><a href="#">Menu Item 2</a>
</li>
<li><a href="#">Menu Item 3</a>
</li>
<li><a href="#">Menu Item 4</a>
</li>
<li><a href="#">Menu Item 5</a>
</li>
<li><a href="#">Menu Item 6</a>
</li>
</ul>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown with Image 2 <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Menu Item 1</a>
<img src="http://placekitten.com/g/200/300" class="navimg">
</li>
<li><a href="#">Menu Item 2</a>
</li>
<li><a href="#">Menu Item 3</a>
</li>
<li><a href="#">Menu Item 4</a>
</li>
<li><a href="#">Menu Item 5</a>
</li>
<li><a href="#">Menu Item 6</a>
</li>
</ul>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
css
.dropdown-menu
padding-right: 150px;
/* width of img */
position: relative;
.dropdown-menu:after
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 150px;
/* width of img */
background: url(http://placehold.it/150x220) center;
background-size: cover;
.nav .dropdown-menu ul
position:relative;
overflow:auto;
.navimg
position:absolute;
top:0;
right:0;
height:100%;
.dropdown-menu
position: absolute;
【讨论】:
几乎!因此,除了整个导航栏扩展以适应下拉菜单外,这有效。有解决办法吗? 完美 - 像魅力一样工作! 我注意到您链接到 html 和 css 中的图像。重复引用是否有原因? css 图片来自你的代码 【参考方案4】:您是否尝试过定位父元素.dropdown-menu:after, 尝试在 Adam 的 CSS 之后添加类似这样的内容:
.dropdown-menu:after < li:nth-child(1) background: url(1st) center
.dropdown-menu:after < li:nth-child(2) background: url(2nd) center
.dropdown-menu:after < li:nth-child(3) background: url(3rd) center
//etc
我没有尝试过,但我认为这是一个很好的解决方案。
【讨论】:
【参考方案5】:这里有一个防弹示例:
HTML 标记:
<div class="dropdown"> <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu imaged_menu" role="menu" aria-labelledby="dLabel">
<div class="col-lg-6 col-xs-6 fulllist">
<li><a href="#">Longer menu item</a>
</li>
<li><a href="#">More longer menu item</a>
</li>
<li><a href="#">More more longer menu item</a>
</li>
<li><a href="#">More more more longer menu item</a>
</li>
<li><a href="#">More more more more longer menu item</a>
</li>
<li><a href="#">Longer menu item</a>
</li>
<li><a href="#">More longer menu item</a>
</li>
<li><a href="#">More more longer menu item</a>
</li>
<li><a href="#">More more more longer menu item</a>
</li>
<li><a href="#">More more more more longer menu item</a>
</li>
<li><a href="#">Longer menu item</a>
</li>
<li><a href="#">More longer menu item</a>
</li>
<li><a href="#">More more longer menu item</a>
</li>
<li><a href="#">More more more longer menu item</a>
</li>
<li><a href="#">More more more more longer menu item</a>
</li>
</div>
<div class="col-lg-6 col-xs-6 imagebox">
<img src="http://blog.templatemonster.com/wp-content/uploads/2012/10/Bootstraps.jpg" />
</div>
</ul>
</div>
然后CSS标记:
/* CSS used here will be applied after bootstrap.css */
.imaged_menu
white-space: nowrap;
.imagebox
padding:0 2%;
.imagebox img
max-height:100%;
max-width:100%;
/* let's hide image ----------- */
@media only screen and (max-width : 768px)
.imagebox
display:none !important
正如您会在其他答案中注意到的那样,它们在某些时候都失败了,因为它们试图使用 Bootstrap 而没有其他任何东西,因此在调整大小时会受到影响。使用这种方法,Bootstrap 仅用于基本部署,然后我们添加一些小的 HTML 标记以准确定位元素,然后简单地使用常规 CSS。尝试调整大小,您会看到它的行为完全如您所要求的那样,无需进行重大更改。是的,图像会在您需要时消失。
说了这么多,这是一些脚手架的基本示例,因此您可能需要调整一些尺寸或媒体查询提示点,但您会明白的
【讨论】:
另一个很棒的解决方案!以上是关于将图像添加到引导下拉菜单的主要内容,如果未能解决你的问题,请参考以下文章