我正在努力自定义选择下拉菜单。
这是最终结果。
我可以通过选择下拉菜单来完成吗？
非常感谢任何帮助或示例链接。
干杯!
问问题
1714 次
3 回答
1
是否使用选择元素以外的其他选项？如果是，你可以用一个下拉插件替换它，比如Bootstrap 提供的那个。像这样的组件将比选择更容易定制和设置样式。如果您打算在表单或可能需要 select 的本机功能的地方使用它，您仍然可以使用 Bootstrap 下拉菜单，在顶部添加我开发的这个插件：Dropdown-select 希望这会有所帮助。
于 2013-11-12T20:33:02.793 回答
1
于 2013-11-05T13:24:21.520 回答
0
这完全显示了我发布的图像。但是，我没有使用下拉菜单。
HTML
<div id="nav-country">
<div id="top-country">
<div id="left-top-c-container">
<?php
if ($_SESSION['australasia']==1) { ?>
<img id="auz-img" src="<?php echo get_template_directory_uri(); ?>/assets/images/auz.png" alt="flag icon auztralasia">
<p>AUZ</p>
<?php } else { ?>
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/uk.png" alt="flag icon united kingdom">
<p>UK</p>
<?php } ?>
</div>
<div id="right-top-c-container">
<div id="right-arrow">
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/arrow_dropdown.png" alt="small arrow image">
</div>
</div>
</div>
<div id="bottom-country">
<?php
if ($_SESSION['australasia']==1) { ?>
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/uk.png" alt="flag icon united kingdom">
<p>UK</p>
<?php } else { ?>
<img id="auz-img" src="<?php echo get_template_directory_uri(); ?>/assets/images/auz.png" alt="flag icon auztralasia">
<p>AUZ</p>
<?php } ?>
</div>
</div>
CSS
/* COUNTRY FLAGS SELECTORS
================================================== */
#nav-country {
position: absolute;
z-index: 11;
right: 2%;
top: 13px;
}
#top-country {
width:84px;
height: 26px;
font-size: 11px;
line-height: 13px;
font-family: 'Open Sans', sans-serif;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background-color: #EEEEEE;
}
#left-top-c-container {
float: left;
width:64px;
height: 26px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
#right-top-c-container {
float: left;
width:20px;
height: 26px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
border-bottom-left-radius: 0px;
border-top-left-radius: 0px;
background-color: #E2E2E2;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#bottom-country {
opacity: 0;
width:84px;
height: 26px;
font-size: 11px;
line-height: 13px;
font-family: 'Open Sans', sans-serif;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
border-top-right-radius: 0px;
background-color: #E2E2E2;
visibility: hidden;
cursor: pointer;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#bottom-country:hover, #bottom-country:focus {
visibility: visible !important;
opacity: 1 !important;
}
/* Show the total country list */
.visible {
visibility: visible !important;
opacity: 1 !important;
}
#right-arrow img {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
/* Add the border to the arrow */
.rotate-on {
border-bottom-right-radius: 0px !important;
}
/* Rotate the selected country drop-adown arrow */
.rotate-on img {
-webkit-transform: rotate(180deg); /* Chrome and other webkit browsers */
-moz-transform: rotate(180deg); /* FF */
-o-transform: rotate(180deg); /* Opera */
-ms-transform: rotate(180deg); /* IE9 */
transform: rotate(180deg); /* W3C complaint browsers */
filter: progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, DX=0, DY=0, SizingMethod='auto expand'); /* IE8 and below */
}
#top-country p, #top-country img, #bottom-country p, #bottom-country img {
float: left;
/* margin-top: 6px; */
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#left-top-c-container img, #bottom-country img{
/* margin: 7px 8px 7px 10px; */
margin: 7px 8px 7px 9px;
}
#top-country p, #bottom-country p {
margin-top: 7px;
}
#top-country #right-arrow {
background-color: #E2E2E2;
display:inline-block;
margin-top: 10px;
margin-left: 4px;
}
/* Add color text effect on the list of country */
#bottom-country:focus p, #bottom-country:hover p {
color: #FFA217;
}
img#auz-img {
margin: 7px 4px 7px 9px;
}
jQuery
jQuery(document).ready(function() {
jQuery("#top-country").hover(function(){
// Add class rotate-on to the
jQuery("#right-top-c-container").toggleClass("rotate-on");
jQuery("#bottom-country").toggleClass("visible");
});
// Let the arrow pointing down when we are hovering the country list
jQuery("#bottom-country").hover(function(){
jQuery("#right-top-c-container").toggleClass("rotate-on");
});
jQuery("#bottom-country").click(function(){
// We want to redirect to the correct url
var country_value = jQuery("#bottom-country").children("p").text();
if(country_value=="UK"){
var pathname = window.location.href;
// console.log(pathname);
pathname = pathname.replace('e.au.t','e.t');
pathname = pathname+"?selected_c=uk";
window.location.href = pathname;
}
else if (country_value=="AUZ") {
var pathname = window.location.href;
// console.log(pathname);
pathname = pathname.replace('e.t', 'e.au.t');
pathname = pathname+"?selected_c=au";
// console.log(pathname);
window.location.href = pathname;
}
});
});
于 2013-11-13T00:53:04.513 回答