Question

我创建了这个：http://kaslabdesign.dk/ToggleWord.aspx它是什么，是一个用下载链接切换一个小方框的菜单。我想要它放在它的位置以及它现在的样子，这是HTML代码：

HTML

<a href="#menu" id="toggle"><span></span></a>
<div id="menu">
   <ul>
      <li>
         <a href="assets/WordApplication/AnsøgningfraKasperAndersen.docx" target='_blank' title="Click here to open a Word document">Leder du efter en Mediegrafiker Elev? Så download ansøgning her! 
            <img src="assets/img/word.png" />
         </a>
      </li>
   </ul>
</div>

的CSS：

/* Important styles */
#toggle {
   display: block;
   width: 28px;
   height: 30px;
   margin-left: auto;
   z-index: 1;
}

#toggle span:after,
#toggle span:before {
   content: "";
   position: absolute;
   left: 0;
   top: -9px;
   z-index: 1;
}

#toggle span:after {
   top: 9px;
   z-index: 1;
}

#toggle span {
   position: relative;
   display: block;
   z-index: 1;
}

#toggle span,
#toggle span:after,
#toggle span:before {
   width: 100%;
   height: 5px;
   background-color: #888;
   transition: all 0.3s;
   backface-visibility: hidden;
   border-radius: 2px;
   z-index: 1;
}

/* on activation */
#toggle.on span {
   background-color: transparent;
   z-index: 1;
}

 #toggle.on span:before {
    transform: rotate(45deg) translate(5px, 5px);
    z-index: 1;
 }

 #toggle.on span:after {
 transform: rotate(-45deg) translate(7px, -8px);
    z-index: 1;
 }

#toggle.on + #menu {
   opacity: 1;
   visibility: visible;
   margin-left: auto;
   z-index: 1;
}

/* menu appearance*/
#menu {
   position: relative;
   color: #999;
   width: 200px;
   padding: 10px;
   margin-right: 0px;
   font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
   text-align: center;
   border-radius: 4px;
   background: white;
   box-shadow: 0 1px 8px rgba(0,0,0,0.05);
   /* just for this demo */
   opacity: 0;
   visibility: hidden;
   transition: opacity .4s;
   z-index: 1;
}

#menu:after {
   position: absolute;
   top: -15px;
   left: 95px;
   content: "";
   display: block;
   border-left: 15px solid transparent;
   border-right: 15px solid transparent;
   border-bottom: 20px solid white;
   z-index: 1;
}

JavaScript的：

var theToggle = document.getElementById('toggle');
// based on Todd Motto functions
// http://toddmotto.com/labs/reusable-js/

// hasClass
function hasClass(elem, className) {
    return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
}
// addClass
function addClass(elem, className) {
    if (!hasClass(elem, className)) {
        elem.className += ' ' + className;
    }
}
// removeClass
function removeClass(elem, className) {
    var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, ' ') + ' ';
    if (hasClass(elem, className)) {
        while (newClass.indexOf(' ' + className + ' ') >= 0) {
            newClass = newClass.replace(' ' + className + ' ', ' ');
        }
        elem.className = newClass.replace(/^\s+|\s+$/g, '');
    }
}
// toggleClass
function toggleClass(elem, className) {
    var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, " ") + ' ';
    if (hasClass(elem, className)) {
        while (newClass.indexOf(" " + className + " ") >= 0) {
            newClass = newClass.replace(" " + className + " ", " ");
        }
        elem.className = newClass.replace(/^\s+|\s+$/g, '');
    } else {
        elem.className += ' ' + className;
    }
}

theToggle.onclick = function () {
    toggleClass(this, 'on');
    return false;
}

问题在于它完美适用于： http://kaslabdesign.dk/ToggleWord.aspx 但当它开启时：http://kaslabdesign.dk/它出了问题，它在整个地方被粉碎了，我希望它是一个在所有东西之上的盒子，不受任何影响而且不会影响任何东西，我希望有人可以帮助我，因为我不知道它为什么会出错。

由于

单词切换菜单

0 个答案: