首页 \ 问答 \ 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.

相关问答

更多

需要响应内容滑块(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 ...

相关文章

更多

最新问答

更多
  • 如何从远程文件拉取文件而不覆盖本地文件?(How do I pull files from remote without overwriting local files?)
  • Reactjs:状态改变时重新渲染iframe(Reactjs: re-renders iframes when state changed)
  • 奇怪的网址,以及跟随php页面流程的困难(odd url, and difficulty in following the php page flow)
  • 标签活动无效(Tab Activity is not working)
  • JavaME合适的语法编译器建议?(JavaME-suitable grammar compiler recommendations?)
  • 指定参数(Specifying arguments)
  • 可以通过Ruby插件或控制台覆盖Sketchup中的键盘快捷键吗?(Can one override keyboard shortcuts in Sketchup through the a Ruby Plugin or Console?)
  • 计算Java EE Web App中用户数的最佳方法(Best way to count number of users in a Java EE web App)
  • 无法使用templateUrl加载cordova中的外部模板(unable to load external templates in cordova with templateUrl)
  • PHPExcel:写入期间无法使用缓存(PHPExcel: Unable to use cache during write)
  • 在javascript中嵌套这个指针(nested this pointer in javascript)
  • 谁跟领航致远培训过,有问题问下啊
  • 控制器要求在入门时下载(Controller ask to download on entry)
  • 未能通过conda安装Asyncio(Failure to install Asyncio via conda)
  • 如何查找已完成项目的总长度?(How to find length of total completed items?)
  • 如何检查OleInitialize是否已被调用?(How to check if OleInitialize has already been called?)
  • SQL在特定范围内返回列中具有最大值的行(SQL Returning rows with max value in column, within a specific range)
  • preg_match从url获取id(preg_match get the id from url)
  • 如何在运算符中为make方程转换perl变量?(How to convert a perl variable in a operator for make equations?)
  • 在导航上方添加空格/标题。(Add a white space/ header above navigation.)
  • MeetingItem已保存;(MeetingItem saved; but change now shown in Calendar)
  • c#vb:我们应该使用System.Lazy进行资源密集型任务吗?(c# vb: Should we use System.Lazy for resource-intensive task? (when threading is not needed))
  • 为什么在armeabi代码中使用armeabi-v7a代码?(Why use armeabi-v7a code over armeabi code?)
  • 获取请求的自定义标头(Java HTTP)(Fetching a custom header of a request (Java HTTP))
  • 是否可以在嵌套的if语句中从varchar转换为numeric以动态评估参数?(Is it possible to convert from varchar to numeric within a nested if statement in order to dynamically evaluate a parameter?)
  • 如何将Html.ActionLink转换为链接到Ajax调用的按钮?(How to convert from Html.ActionLink to a button linked to Ajax call?)
  • 应用程序如何处理Windows符号链接?(How are Windows symbolic links treated by the apps?)
  • html,js,css在jsfiddle中工作,但不在sharepoint中(html, js, css works in jsfiddle but not in sharepoint)
  • 从Ruby脚本调用Elasticsearch Rest API(Calling Elasticsearch Rest API from Ruby script)
  • 如何将嵌套setTimeouts转换为承诺(How to convert nested setTimeouts to promises)