下拉隐藏在mootools silder后面

本文介绍了下拉隐藏在mootools silder后面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我在 mootools 滑块中有一个自定义下拉框，如下图所示。此滑块包含三个div，即自动垂直一个一个地旋转。滑块和自定义下拉列表的javascript和css如下所述。我的问题是，当我把下拉到按照下面的图像隐藏在滑块div后面的滑块div中。根据要求，我无法更改下拉位置，也不会增加滑块高度，那么如何在顶部滑动条上显示下拉列表项。任何建议将不胜感激。

现在您可以看到上面的图片每单位成本下拉列表隐藏在滑块容器后面。

Slider mootools

code.google/p /locjoomla/source/browse/trunk/mootool/lofslidernews/js/lofslidernews.mt11.js

mootools/download/get/mootools-1.2.4.js

cnetjavascript.googlecode/files /mootools.svn.js

< script type =text / javascript> var _lofmain = $（'lofslidecontent45'）; var _lofscmain = _lofmain.getElement（'。lof-main-wapper'）; var _lofnavigator = _lofmain.getElement（'。lof-navigator-outer .lof-navigator'）; var object = new LofFlashContent（_lofscmain， _lofnavigator， _lofmain.getElement（'。lof-navigator-outer'）， {fxObject：{transition：Fx.Transitions。 Quad.easeInOut，持续时间：800}，间隔：3000，方向：'vrdown'}）; object.start（true，_lofmain.getElement（'。preload'））; var isCustom =@（ViewBag.IsCustom）; if（isCustom ==True）{ object.callMyEvent（2，true）; //调用我的自定义事件 object.setNavActive（2）;

滑块CSS

/ * CSS文档* / .lof-slidecontent { margin- left：0px; 职位：亲属; overflow：hidden; width：1200px; height：486px; } .lof-slidecontent .preload { height：100％; 宽度：100％; 背景：#FFF; 位置：绝对; top：0; 剩下：0; z-index：10; 颜色：#FFF; text-align：center; } .lof-slidecontent .preload div { height：100％; 宽度：100％; / *背景：透明网址（../ Images / MyImages / Icons / load-indicator.gif）无重复滚动50％50％; * / } / *主闪光* / .lof-main-wapper { margin-right：auto; overflow：hidden; / *背景：透明网址（../ Images / MyImages / Icons / load-indicator.gif）无重复滚动50％50％; * / padding：0px; height：488px; width：1014px; 职位：亲属; overflow：hidden; } .lof-main-wapper .lof-main-item { padding：0px; margin：0px; height：488px; 宽度：100％; 位置：绝对; } .lof-main-wapper .lof-main-item img { padding：0px; 宽度：100％; } .lof-main-item-desc { z-index：100px; 位置：绝对; top：150px; left：50px; width：400px; background：url（../ images / transparent_bg.png）; / *过滤器：0.7（不透明度：60）* / } .lof-main-item-desc p {颜色：#FFF; margin：0 8px; padding：8px 0; } .lof-main-item-desc h3 a { color：#FFF; 保证金：0; font-size：140％; padding：20px 8px 2px; font-family：Trebuchet MS，Trebuchet，Arial，Verdana，sans-serif; } / *项目导航器* / ul.lof-navigator { top：0px; padding：0px; margin：0px; 位置：绝对; 宽度：100％; overflow：hidden; } ul.lof-navigator li { cursor：hand; 光标：指针; list-style：none; 宽度：100％; padding：0px; margin：0px; } .lof-navigator-outer { position：absolute; right：0; top：0px; z-index：100; height：488px; width：204px; padding：0px; margin：0px; float：left; } .lof-navigator li.active { background：url（../../ Images / MyImages / Icons / arrow-bg2.png）no-repeat ; 背景颜色：＃d21c1c; 颜色：#FFF; } .lof-navigator li：hover {} .lof-navigator li div { text-align：center; height：162px; 职位：亲属; margin-left：0px; padding-left：0px; 背景颜色：#FFFFFF; } .lof-navigator li.active div {} .lof-next {位置：绝对; top：0; height：30px; 背景：＃F9F9F9; display：block; 宽度：100％; } .lof-previous { position：absolute; bottom：0; height：30px; 背景：＃F9F9F9; display：block; 宽度：100％; } .lof-navigator-MycontentHeader { font-family：Caecilia LT Std; font-size：26px; 颜色：＃d21c1c; } li.active .lof-navigator-MycontentHeader { color：#FFF; } .lof-navigator-MycontentFooter { font-family：TradeGothic，Arial; font-style：oblique; font-size：13px; 颜色：黑色; } li.active .lof-navigator-MycontentFooter { color：#FFF; }

下拉菜单

http：// www。 mindstick/Articles/f649279c-dc3a-42cb-ab10-e24ae9a1bb90/?Stylish%20Dropdown%20in%20HTML

预先感谢！

解决方案

你可以把滑块放在iframe中吗？可能会有更复杂的补救措施，但总是有效。

I have a custom dropdown box in mootools slider as per below image. This slider contains three div, that auto rotate in vertically one by one. Slider’s and custom dropdown’s javascript and css described below. My problem is that, when I put dropdown into slider div that hide behind slider div as per below image. According requirement, I can’t changed dropdown position and not increase slider height, then how to display dropdown list items on top off slider. Any suggestion will be appreciated.

Now you can see above image Per Unit Cost drop down list is hiding behind slider container.

Slider mootools

code.google/p/locjoomla/source/browse/trunk/mootool/lofslidernews/js/lofslidernews.mt11.js

mootools/download/get/mootools-1.2.4.js

cnetjavascript.googlecode/files/mootools.svn.js

<script type="text/javascript"> var _lofmain = $('lofslidecontent45'); var _lofscmain = _lofmain.getElement('.lof-main-wapper'); var _lofnavigator = _lofmain.getElement('.lof-navigator-outer .lof-navigator'); var object = new LofFlashContent(_lofscmain, _lofnavigator, _lofmain.getElement('.lof-navigator-outer'), { fxObject: { transition: Fx.Transitions.Quad.easeInOut, duration: 800 }, interval: 3000, direction: 'vrdown' }); object.start(true, _lofmain.getElement('.preload')); var isCustom = "@(ViewBag.IsCustom)"; if (isCustom == "True") { object.callMyEvent(2, true); // call my custom event object.setNavActive(2); }

Slider CSS

/* CSS Document */ .lof-slidecontent { margin-left: 0px; position: relative; overflow: hidden; width: 1200px; height: 486px; } .lof-slidecontent .preload { height: 100%; width: 100%; background: #FFF; position: absolute; top: 0; left: 0; z-index: 10; color: #FFF; text-align: center; } .lof-slidecontent .preload div { height: 100%; width: 100%; /*background: transparent url(../Images/MyImages/Icons/load-indicator.gif) no-repeat scroll 50% 50%;*/ } /* main flash */ .lof-main-wapper { margin-right: auto; overflow: hidden; /*background: transparent url(../Images/MyImages/Icons/load-indicator.gif) no-repeat scroll 50% 50%;*/ padding: 0px; height: 488px; width: 1014px; position: relative; overflow: hidden; } .lof-main-wapper .lof-main-item { padding: 0px; margin: 0px; height: 488px; width: 100%; position: absolute; } .lof-main-wapper .lof-main-item img { padding: 0px; width: 100%; } .lof-main-item-desc { z-index: 100px; position: absolute; top: 150px; left: 50px; width: 400px; background: url(../images/transparent_bg.png); /* filter:0.7(opacity:60) */ } .lof-main-item-desc p { color: #FFF; margin: 0 8px; padding: 8px 0; } .lof-main-item-desc h3 a { color: #FFF; margin: 0; font-size: 140%; padding: 20px 8px 2px; font-family: "Trebuchet MS" ,Trebuchet,Arial,Verdana,sans-serif; } /* item navigator */ ul.lof-navigator { top: 0px; padding: 0px; margin: 0px; position: absolute; width: 100%; overflow: hidden; } ul.lof-navigator li { cursor: hand; cursor: pointer; list-style: none; width: 100%; padding: 0px; margin: 0px; } .lof-navigator-outer { position: absolute; right: 0; top: 0px; z-index: 100; height: 488px; width: 204px; padding: 0px; margin: 0px; float: left; } .lof-navigator li.active { background: url(../../Images/MyImages/Icons/arrow-bg2.png) no-repeat; background-color: #d21c1c; color: #FFF; } .lof-navigator li:hover { } .lof-navigator li div { text-align: center; height: 162px; position: relative; margin-left: 0px; padding-left: 0px; background-color: #FFFFFF; } .lof-navigator li.active div { } .lof-next { position: absolute; top: 0; height: 30px; background: #F9F9F9; display: block; width: 100%; } .lof-previous { position: absolute; bottom: 0; height: 30px; background: #F9F9F9; display: block; width: 100%; } .lof-navigator-MycontentHeader { font-family: Caecilia LT Std; font-size: 26px; color: #d21c1c; } li.active .lof-navigator-MycontentHeader { color: #FFF; } .lof-navigator-MycontentFooter { font-family: TradeGothic, Arial; font-style: oblique; font-size: 13px; color: Black; } li.active .lof-navigator-MycontentFooter { color: #FFF; }

Drop down

www.mindstick/Articles/f649279c-dc3a-42cb-ab10-e24ae9a1bb90/?Stylish%20Dropdown%20in%20HTML

Thanks in advance!

解决方案

Can you put the slider in an iframe? There might be a more sophisticated remedy, but that always works.