如何在我的底部导航栏中为jQuery Mobile网站制作更大的中心按钮? This is the effect I would like to have
在不破坏我的导航栏的情况下,按钮与我的应用程序的主窗口重叠需要什么CSS和jQuery?
答案 0 :(得分:2)
这应该让你开始很好:
.ui-mobile .ui-page .ui-footer .ui-navbar .ui-btn.ui-btn-active {
/*to make the active nav item stick-out we need to make it absolutely positioned*/
position : absolute;
/*this width is based on the number of nav items, 4 items means 25% for each*/
width : 25%;
/*you can change this to however tall you want to make the active nav item*/
height : 50px;
/*this places the active nav item at the same height as the rest of the nav items*/
bottom : -39px;
/*normal nav items are z-index:10, so this will place the active one above the others*/
z-index : 11;
/*this adds the top-left and top-right rounded corners*/
-webkit-border-top-right-radius : 6px;
-moz-border-top-right-radius : 6px;
border-top-right-radius : 6px;
-webkit-border-top-left-radius : 6px;
-moz-border-top-left-radius : 6px;
border-top-left-radius : 6px;
-webkit-background-clip : padding-box;
-moz-background-clip : padding;
background-clip : padding-box;
/*this adds box shadow to the active nav item*/
-webkit-box-shadow : 0 -1px 8px #000;
-moz-box-shadow : 0 -1px 8px #000;
box-shadow : 0 -1px 8px #000;
}
/*we need to override the default "overflow:hidden" for a couple elements so our active nav item doesn't get clipped*/
.ui-mobile .ui-page .ui-footer .ui-navbar,
.ui-mobile .ui-page .ui-footer .ui-navbar ul {
overflow : visible;
}
答案 1 :(得分:1)
我不太确定导航栏的结构/ CSS是什么,但也许这会起作用:
z-index: 2 //This number must be higher than the z-index-number of the other navabar-element
bottom: 0px
//Depending on the normal size of your navbar.
width: x
height: y