首页 \ 问答 \ jQuery Content滑块阻止响应式菜单抽屉(jQuery Content slider blocks responsive menu drawer)

jQuery Content滑块阻止响应式菜单抽屉(jQuery Content slider blocks responsive menu drawer)

内容滑块可阻止我的响应式网站的菜单项

我使用以下css来完成此任务

/* http://www.menucool.com */

#sliderFrame, #sliderFrame div {
    box-sizing: content-box;
}

#sliderFrame 
{
    width:920px;
    margin:0 auto; /*center-aligned*/
    padding:20px;
    box-shadow: 0 0 5px #BBB;
    border:1px solid #CCC;
    background-color:#FFF;
}

#slider, #slider .sliderInner {
    width:680px;height:306px;/* Must be the same size as the slider images */
    border-radius:0px;
}

#slider {
    background-color:white;
    float:left;
    position:relative;
    transform: translate3d(0,0,0);
}

/* the link style (if an image is wrapped by a link) */
#slider a.imgLink, #slider .video {
    z-index:2;
    cursor:pointer;
    position:absolute;
    top:0px;left:0px;border:0;padding:0;margin:0;
    width:100%;height:100%;
}
#slider .video {
    background:transparent url(video.png) no-repeat 50% 50%;
}

/* Caption styles */
#slider .mc-caption {
    position:absolute;
    width:400px;
    height:auto;
    padding:10px 0;/* 10px will increase height.*/
    left:120px;
    bottom:10px;
    overflow:hidden;
    font:bold 13px/16px Arial;
    color:#069;
    text-align:center;
    background:rgba(255,255,255,0.2);
    border:1px solid rgba(255,255,255,0.3);
    border-radius: 5px;
}
#slider .mc-caption a { 
    color:#060;
}


/* ------ built-in navigation bullets wrapper ------*/
#slider .navBulletsWrapper  {
    display:none;
}

/* --------- Others ------- */

#slider img, #slider>b, #slider a>b {
    position:absolute; border:none; display:none;
}

#slider .sliderInner {
    overflow:hidden;
    position:absolute; top:0; left:0;
}

#slider>a, #slider video, #slider audio {display:none;}
#slider div {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}



/* -- thumbnails -- */
#thumbs 
{
    float:left;
    margin-left:10px;
    width:230px;
    font:normal 11px/13px Arial;
    border-top:1px solid #CCC;
    color:#666;
}
#thumbs .thumb 
{
    border:1px solid #CCC;
    border-top:1px solid #FFF;
    padding:11px 8px;
    background:#EEE;
    cursor:pointer;
}
#thumbs .thumb-on 
{
    background:#FFF;
}

#thumbs img{border:1px solid #DDD; cursor:pointer; width:70px; height:44px;}

#thumbs .frame {float:left;padding:2px;border:1px solid #CCC;background:white;border-radius:3px;box-shadow:0 0 3px #BBB;font-size:0;line-height:0;}
#thumbs .thumb-content {float:left;width:110px;padding-left:18px;}

/* Captions in #thumbs .thumb-content */
#thumbs .thumb-content p {font-weight:bold; color:#BF5D9B; margin:0 0 3px;padding:0;}
#thumbs .thumb-on .thumb-content p {color:#BB0000;}

以下html为滑块

<div id="sliderFrame" style="align-content:flex-start;background-color:#93C994;">
        <div id="slider">
            <img src="img/3.jpg" alt="Caption for slide 1" />
            <img src="img/slider_jquery_responsive_slideme.jpg" alt="Caption for slide 2" />
            <a href="http://www.menucool.com"><img src="slide-3.jpg" alt="Header File" /></a>
            <img src="img/picto.png" alt="Caption for slide 3" style="height:350px;width:800px"/>
            <img src="img/3.jpg" alt="Caption for slide 4"/>
            <img src="img/slider_jquery_responsive_slideme.jpg" alt="Caption for slide 5"/>
        </div>
    </div>

这是菜单抽屉的html

<header role="banner">
    <div id="cd-logo"><a href="#0"><img src="img/cd-logo.svg" alt="logo" onClick="#"></a></div>
      <nav class="main-nav">
			<ul><!-- insert more links here -->
                <li><a class="cd-signin" href="#0">Sign in</a></li>
				<li><a class="cd-signup" href="#0">Sign up</a></li>
			</ul>
		</nav>
	</header>
及其相应的CSS

/* -------------------------------- 

Main components 

-------------------------------- */
header[role=banner] {
  position: relative;
  height: 50px;
  background: #343642;
}
header[role=banner] #cd-logo {
  float: left;
  margin: 4px 0 0 5%;
  /* reduce logo size on mobile and make sure it is left aligned with the transform-origin property */
  -webkit-transform-origin: 0 50%;
  -moz-transform-origin: 0 50%;
  -ms-transform-origin: 0 50%;
  -o-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  transform: scale(0.8);
}
header[role=banner] #cd-logo img {
  display: block;
}
header[role=banner]::after {
  /* clearfix */
  content: '';
  display: table;
  clear: both;
}
@media only screen and (min-width: 768px) {
  header[role=banner] {
    height: 80px;
  }
  header[role=banner] #cd-logo {
    margin: 20px 0 0 5%;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
	z-index:inherit;
  }
}

.main-nav {
  float: right;
  margin-right: 5%;
  width: 44px;
  height: 100%;
  background: url("../img/cd-icon-menu.svg") no-repeat center center;
  cursor: pointer;
}
.main-nav ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}
.main-nav ul.is-visible {
  -webkit-transform: translateY(50px);
  -moz-transform: translateY(50px);
  -ms-transform: translateY(50px);
  -o-transform: translateY(50px);
  transform: translateY(50px);
}
.main-nav a {
  display: block;
  height: 50px;
  line-height: 50px;
  padding-left: 5%;
  background: #292a34;
  border-top: 1px solid #3b3d4b;
  color: #FFF;
}
@media only screen and (min-width: 768px) {
  .main-nav {
    width: auto;
    height: auto;
    background: none;
    cursor: auto;
  }
  .main-nav ul {
    position: static;
    width: auto;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    line-height: 80px;
  }
  .main-nav ul.is-visible {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  .main-nav li {
    display: inline-block;
    margin-left: 1em;
  }
  .main-nav li:nth-last-child(2) {
    margin-left: 2em;
  }
  .main-nav a {
    display: inline-block;
    height: auto;
    line-height: normal;
    background: transparent;
  }
  .main-nav a.cd-signin, .main-nav a.cd-signup {
    padding: .6em 1em;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 50em;
  }
  .main-nav a.cd-signup {
    background: #2f889a;
    border: none;
  }
}

谁能帮我???


The content slider blocks the menu items of my responsive site

I have used the following css to accomplish this

/* http://www.menucool.com */

#sliderFrame, #sliderFrame div {
    box-sizing: content-box;
}

#sliderFrame 
{
    width:920px;
    margin:0 auto; /*center-aligned*/
    padding:20px;
    box-shadow: 0 0 5px #BBB;
    border:1px solid #CCC;
    background-color:#FFF;
}

#slider, #slider .sliderInner {
    width:680px;height:306px;/* Must be the same size as the slider images */
    border-radius:0px;
}

#slider {
    background-color:white;
    float:left;
    position:relative;
    transform: translate3d(0,0,0);
}

/* the link style (if an image is wrapped by a link) */
#slider a.imgLink, #slider .video {
    z-index:2;
    cursor:pointer;
    position:absolute;
    top:0px;left:0px;border:0;padding:0;margin:0;
    width:100%;height:100%;
}
#slider .video {
    background:transparent url(video.png) no-repeat 50% 50%;
}

/* Caption styles */
#slider .mc-caption {
    position:absolute;
    width:400px;
    height:auto;
    padding:10px 0;/* 10px will increase height.*/
    left:120px;
    bottom:10px;
    overflow:hidden;
    font:bold 13px/16px Arial;
    color:#069;
    text-align:center;
    background:rgba(255,255,255,0.2);
    border:1px solid rgba(255,255,255,0.3);
    border-radius: 5px;
}
#slider .mc-caption a { 
    color:#060;
}


/* ------ built-in navigation bullets wrapper ------*/
#slider .navBulletsWrapper  {
    display:none;
}

/* --------- Others ------- */

#slider img, #slider>b, #slider a>b {
    position:absolute; border:none; display:none;
}

#slider .sliderInner {
    overflow:hidden;
    position:absolute; top:0; left:0;
}

#slider>a, #slider video, #slider audio {display:none;}
#slider div {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}



/* -- thumbnails -- */
#thumbs 
{
    float:left;
    margin-left:10px;
    width:230px;
    font:normal 11px/13px Arial;
    border-top:1px solid #CCC;
    color:#666;
}
#thumbs .thumb 
{
    border:1px solid #CCC;
    border-top:1px solid #FFF;
    padding:11px 8px;
    background:#EEE;
    cursor:pointer;
}
#thumbs .thumb-on 
{
    background:#FFF;
}

#thumbs img{border:1px solid #DDD; cursor:pointer; width:70px; height:44px;}

#thumbs .frame {float:left;padding:2px;border:1px solid #CCC;background:white;border-radius:3px;box-shadow:0 0 3px #BBB;font-size:0;line-height:0;}
#thumbs .thumb-content {float:left;width:110px;padding-left:18px;}

/* Captions in #thumbs .thumb-content */
#thumbs .thumb-content p {font-weight:bold; color:#BF5D9B; margin:0 0 3px;padding:0;}
#thumbs .thumb-on .thumb-content p {color:#BB0000;}

And the following html for the slider

<div id="sliderFrame" style="align-content:flex-start;background-color:#93C994;">
        <div id="slider">
            <img src="img/3.jpg" alt="Caption for slide 1" />
            <img src="img/slider_jquery_responsive_slideme.jpg" alt="Caption for slide 2" />
            <a href="http://www.menucool.com"><img src="slide-3.jpg" alt="Header File" /></a>
            <img src="img/picto.png" alt="Caption for slide 3" style="height:350px;width:800px"/>
            <img src="img/3.jpg" alt="Caption for slide 4"/>
            <img src="img/slider_jquery_responsive_slideme.jpg" alt="Caption for slide 5"/>
        </div>
    </div>

here is the html for the menu drawer

<header role="banner">
    <div id="cd-logo"><a href="#0"><img src="img/cd-logo.svg" alt="logo" onClick="#"></a></div>
      <nav class="main-nav">
			<ul><!-- insert more links here -->
                <li><a class="cd-signin" href="#0">Sign in</a></li>
				<li><a class="cd-signup" href="#0">Sign up</a></li>
			</ul>
		</nav>
	</header>
and its corresponding CSS

/* -------------------------------- 

Main components 

-------------------------------- */
header[role=banner] {
  position: relative;
  height: 50px;
  background: #343642;
}
header[role=banner] #cd-logo {
  float: left;
  margin: 4px 0 0 5%;
  /* reduce logo size on mobile and make sure it is left aligned with the transform-origin property */
  -webkit-transform-origin: 0 50%;
  -moz-transform-origin: 0 50%;
  -ms-transform-origin: 0 50%;
  -o-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  transform: scale(0.8);
}
header[role=banner] #cd-logo img {
  display: block;
}
header[role=banner]::after {
  /* clearfix */
  content: '';
  display: table;
  clear: both;
}
@media only screen and (min-width: 768px) {
  header[role=banner] {
    height: 80px;
  }
  header[role=banner] #cd-logo {
    margin: 20px 0 0 5%;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
	z-index:inherit;
  }
}

.main-nav {
  float: right;
  margin-right: 5%;
  width: 44px;
  height: 100%;
  background: url("../img/cd-icon-menu.svg") no-repeat center center;
  cursor: pointer;
}
.main-nav ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}
.main-nav ul.is-visible {
  -webkit-transform: translateY(50px);
  -moz-transform: translateY(50px);
  -ms-transform: translateY(50px);
  -o-transform: translateY(50px);
  transform: translateY(50px);
}
.main-nav a {
  display: block;
  height: 50px;
  line-height: 50px;
  padding-left: 5%;
  background: #292a34;
  border-top: 1px solid #3b3d4b;
  color: #FFF;
}
@media only screen and (min-width: 768px) {
  .main-nav {
    width: auto;
    height: auto;
    background: none;
    cursor: auto;
  }
  .main-nav ul {
    position: static;
    width: auto;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    line-height: 80px;
  }
  .main-nav ul.is-visible {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  .main-nav li {
    display: inline-block;
    margin-left: 1em;
  }
  .main-nav li:nth-last-child(2) {
    margin-left: 2em;
  }
  .main-nav a {
    display: inline-block;
    height: auto;
    line-height: normal;
    background: transparent;
  }
  .main-nav a.cd-signin, .main-nav a.cd-signup {
    padding: .6em 1em;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 50em;
  }
  .main-nav a.cd-signup {
    background: #2f889a;
    border: none;
  }
}

Can Anyone help me???


原文:https://stackoverflow.com/questions/36910844
更新时间:2019-11-17 22:21

最满意答案

滑块位于标题上方,因为它具有更高的z-index值。 只需为标题指定更高的z-index值:

.header {
  ...
  z-index: 10;
}

有关堆叠上下文的更多信息,有一篇关于mdn优秀文章


The slider is positioned above the header because it has a higher z-index value. Simply give the header a higher z-index value:

.header {
  ...
  z-index: 10;
}

For more information on stacking context there is an excellent article on mdn.

2016-04-28

相关问答

更多

需要响应内容滑块(Need a responsive content slider)

查看http://www.swipejs.com/获取基于移动设备的滑动解决方案,或对http://www.woothemes.com/flexslider进行一些调整 Check out http://www.swipejs.com/ for a mobile based swipe solution, or make some adjustments to http://www.woothemes.com/flexslider

响应式jQuery菜单(Responsive jQuery Menu)

问题来自return false 。 当您点击链接时,您也点击了祖先li和ul 。 在链接“激活”绑定到祖先的函数之前单击事件执行。 由于它们return false因此会阻止默认浏览器行为(导航)。 对于这种菜单行为有更好的解决方案,但是使用你已经拥有的(假设你不会更改你的html),你可以简单地将以下内容添加到你的javascript: $('.navigation').on('click', 'a:only-child', function(e) { e.stopPropagatio ...

jQuery Content滑块阻止响应式菜单抽屉(jQuery Content slider blocks responsive menu drawer)

滑块位于标题上方,因为它具有更高的z-index值。 只需为标题指定更高的z-index值: .header { ... z-index: 10; } 有关堆叠上下文的更多信息,有一篇关于mdn的优秀文章 。 The slider is positioned above the header because it has a higher z-index value. Simply give the header a higher z-index value: .header { . ...

抽屉菜单表演(Drawer menu performances)

翻译x / y比转换或动画top / left更高效,因为翻译倾向于GPU进行渲染,这是强大的并且使移动平稳。 top和left在DOM级别运行,这是限制性的。 此外,你可以缩短一点。 您可以在初始元素的一个位置定义转换,然后只定义添加的类中的更改内容。 尝试这个: .main-drawer { transform: translateX(-300px); width: 300px; max-width: 100%; z-index: 2; transiti ...

将新内容加载到响应滑块中(Loading new content into a responsive slider)

您展示的网站只有两个完全独立的幻灯片。 一个是隐藏的,另一个是在窗口调整大小时显示的。 <div id="slider-one" class="hide-for-mobile"> /*Slider here*/ </div> <div id="slider-two" class="show-for-mobile"> /*Slider here*/ </div> 然后在你的媒体查询移动... .hide-for-mobile { display: none; } .show-for-mobil ...

在Jquery滑块内响应Img(Responsive Img within Jquery slider)

您可以将图像作为背景添加到div中,而不是使用img标记 <div id="indexSlider"> <div class="indexImg" style="background-image: url('imgs/test/test1.jpg');"></div> <div class="indexImg" style="background-image: url('imgs/test/test2.jpg');"></div> <div class="indexImg" style ...

反应原生抽屉菜单:无法找到变量样式(React native drawer menu: can`t find variable styles)

看起来你必须自己添加样式才能完全按照自己的意愿制作抽屉内容。 要实现它,您必须创建样式表 您可以使用此答案获取有关React Native Stylesheet属性的更多信息(它与css非常相似) 也许这个抽屉回购的例子会有所帮助 干杯。 Looks like you have to add styles by yourself to make look Drawer content exactly as you want to. To achieve it you have to create ...

编码导航抽屉菜单(滑块菜单)。(Coding a Navigation Drawer Menu (Slider Menu). (Master Page Detail))

MasterDetailPage是Xamarin.Forms中的类,如果您的类具有相同的名称,那么它可能是冲突。 这里有一些有用的链接: https://developer.xamarin.com/guides/xamarin-forms/user-interface/navigation/master-detail-page/ https://developer.xamarin.com/api/type/Xamarin.Forms.MasterDetailPage/ 你也可以从我的Github下 ...

让我的jQuery滑块响应(Making my jquery slider responsive)

看看这个 。 我相信发生了什么事情是你的下一个和上一步调整到屏幕的高度,而不是像你希望的图像的高度。 所以要自定义它,首先将图像的高度和宽度设置为您想要的任何值,为您的按钮匹配相同的高度,并且只要它们位于相同的父div中它就应该匹配 <html> <head> <title>Image carousel</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet ...

AJAX阻止工作中的图像滑块(AJAX Blocks Image Slider from Working)

好吧,我仍然不知道为什么这个Ajax方法阻止我的滑块工作,但我偶然找到了解决方案。 你应该识别你的img而不是href。 <div id="mycontainer"> <div id= wrapper> <ul id="flip"> <li><img id="home" src="Logo.png" /></li> <li><img id="product" src="Product.png" /></li> </ul> </div> 然后加载这样的内容 $("#home, #pro ...

相关文章

更多

最新问答

更多
  • 如何保护Solr只允许SELECT请求给用户并禁止其他任何东西?(How to secure Solr to allow SELECT request to only users and disallow anything else?)
  • XPath表达式无效/错误TFHpple SWIFT 1.2(XPath Expression not working/incorrect TFHpple SWIFT 1.2)
  • css3 3D变换不能平滑地制作动画(css3 3D transform doesn't animate smoothly)
  • 运行时错误'91'和Outlook.Application = <对象变量或没有设置块变量>?(Run-time error '91' & Outlook.Application = Object variable or With block variable not set?)
  • 慢的webservice问题(Slow webservice problem)
  • textview的不正确对齐方式(Improper alignment of a textview)
  • 在第一步“Hello World”中出现Java错误(Cannot run “Hello World” program in Eclipse)
  • 为什么十六进制地址是14个字符?(why the hex address is 14 character?)
  • 如何在Python中的不同类中使用变量?(How to use variable in different classes in Python?)
  • asp:GridView HYPERLINKFIELD - datanavigateurlformatstring中的asp代码(asp:GridView HYPERLINKFIELD - asp code inside datanavigateurlformatstring)
  • 关于adaboost算法(About adaboost algorithm)
  • 在Matlab上内置图像(Built in Images on Matlab)
  • java swing:输入键事件时焦点丢失(java swing: Focus lost on enter key event)
  • C#中的通用约束,T是相同的TSomethingElse,对吧?(Generic constraints in C#, T is the same TSomethingElse, right?)
  • 从mybatis中的光标获取数据(Fetching data from cursor in mybatis)
  • 在运行时从XML构建对象的最佳方法(Best way for building objects out of XMLs at runtime)
  • 在整个窗口中拉伸sf :: Sprite(Stretch sf::Sprite across entire window)
  • Selenium Node API Web驱动程序等待超时处理程序(Selenium Node API web driver wait timeout handler)
  • 函数使用并且是map的一部分(循环依赖?)(Function uses and is part of map (circular dependency?))
  • 是否可以在C ++ 14中使用可选模板参数创建类型元组?(Is possible to make a tuple of types with optional template parameters in C++14?)
  • PHP从窗帘后面打印/ f(PHP prints /f from behind the curtains)
  • JFrame的contentPane的LayoutManager(LayoutManager of JFrame's contentPane)
  • 用于Instagram Feed的图像滚动(Image Roll Overs for Instagram Feed)
  • 如何显示拉伸字体(双倍宽度/高度)?(How to display stretched font (double width/height)?)
  • 文件操作API在fileapi.h和stdio.h中的WP8差异?(WP8 differences between file manipulation APIs in fileapi.h and stdio.h?)
  • 保存失败后Rails没有回滚事务()(Rails not rolling back transaction after failed save())
  • jqgrid中的分页问题与数组数据(Pagination problem in jqgrid with array data)
  • 重定向时,通过其他页面上的URL调用javascript函数(Call javascript function through url on otherpage while Redirecting)
  • 如何使用InvokeCommandAction调用我的方法并传入参数?(How do I go about using InvokeCommandAction to call a method of mine and pass in parameters?)
  • Jquerymobile按钮仅显示页面的第一个外观(Jquerymobile buttons are shown only first apperance of the page)