2015-04-17 223 views
-1

我從導航菜單網站得到了源,我嘗試在我的tumblr中使用它,但由於某種原因菜單(媒體查詢)的響應部分沒有崩潰。當我在本地執行它時,它會崩潰,但是一旦我將它添加到jsfiddle或tumblr它不會崩潰。導航菜單不崩潰

https://jsfiddle.net/b1jczua7/

CSS

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) { 
    #cssmenu { 
    width: 100%; 
    } 
    #cssmenu ul { 
    width: 100%; 

    } 
    #cssmenu.align-center > ul { 
    text-align: left; 
    } 
    #cssmenu ul li { 
    width: 100%; 
    border-top: 1px solid rgba(120, 120, 120, 0.2); 
    } 
    #cssmenu ul ul li, 
    #cssmenu li:hover > ul > li { 
    height: auto; 
    } 
    #cssmenu ul li a, 
    #cssmenu ul ul li a { 
    width: 100%; 
    border-bottom: 0; 
    } 
    #cssmenu > ul > li { 
    float: none; 
    } 
    #cssmenu ul ul li a { 
    padding-left: 25px; 
    } 
    #cssmenu ul ul ul li a { 
    padding-left: 35px; 
    } 
    #cssmenu ul ul li a { 
    color: #dddddd; 
    background: none; 
    } 
    #cssmenu ul ul li:hover > a, 
    #cssmenu ul ul li.active > a { 
    color: #ffffff; 
    } 
    #cssmenu ul ul, 
    #cssmenu ul ul ul, 
    #cssmenu.align-right ul ul { 
    position: relative; 
    left: 0; 
    width: 100%; 
    margin: 0; 
    text-align: left; 
    } 
    #cssmenu > ul > li.has-sub > a:after, 
    #cssmenu > ul > li.has-sub > a:before, 
    #cssmenu ul ul > li.has-sub > a:after, 
    #cssmenu ul ul > li.has-sub > a:before { 
    display: none; 
    } 
    #cssmenu #menu-button { 
    display: block; 
    padding: 17px; 
    color: #dddddd; 
    cursor: pointer; 
    font-size: 12px; 
    text-transform: uppercase; 
    font-weight: 700; 
    } 
    #cssmenu #menu-button:after { 
    position: absolute; 
    top: 22px; 
    right: 17px; 
    display: block; 
    height: 4px; 
    width: 20px; 
    border-top: 2px solid #dddddd; 
    border-bottom: 2px solid #dddddd; 
    content: ''; 
    } 
    #cssmenu #menu-button:before { 
    position: absolute; 
    top: 16px; 
    right: 17px; 
    display: block; 
    height: 2px; 
    width: 20px; 
    background: #dddddd; 
    content: ''; 
    } 
    #cssmenu #menu-button.menu-opened:after { 
    top: 23px; 
    border: 0; 
    height: 2px; 
    width: 15px; 
    background: #ffffff; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
    } 
    #cssmenu #menu-button.menu-opened:before { 
    top: 23px; 
    background: #ffffff; 
    width: 15px; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    } 
    #cssmenu .submenu-button { 
    position: absolute; 
    z-index: 99; 
    right: 0; 
    top: 0; 
    display: block; 
    border-left: 1px solid rgba(120, 120, 120, 0.2); 
    height: 46px; 
    width: 46px; 
    cursor: pointer; 
    } 
    #cssmenu .submenu-button.submenu-opened { 
    background: #262626; 
    } 
    #cssmenu ul ul .submenu-button { 
    height: 34px; 
    width: 34px; 
    } 
    #cssmenu .submenu-button:after { 
    position: absolute; 
    top: 22px; 
    right: 19px; 
    width: 8px; 
    height: 2px; 
    display: block; 
    background: #dddddd; 
    content: ''; 
    } 
    #cssmenu ul ul .submenu-button:after { 
    top: 15px; 
    right: 13px; 
    } 
    #cssmenu .submenu-button.submenu-opened:after { 
    background: #ffffff; 
    } 
    #cssmenu .submenu-button:before { 
    position: absolute; 
    top: 19px; 
    right: 22px; 
    display: block; 
    width: 2px; 
    height: 8px; 
    background: #dddddd; 
    content: ''; 
    } 
    #cssmenu ul ul .submenu-button:before { 
    top: 12px; 
    right: 16px; 
    } 
    #cssmenu .submenu-button.submenu-opened:before { 
    display: none; 
    } 
} 
+0

的jQuery插件在fiddel https://jsfiddle.net/b1jczua7/ –

+0

[只要你添加的jQuery]檢查錯誤(HTTPS ://jsfiddle.net/b1jczua7/3/)它似乎工作正常。 – lonesomeday

+0

我對此很抱歉,但是你在哪裏添加了Jquery? – user3173447

回答

3

我認爲它不工作,因爲它沒有jQuery庫。可以有任何其他問題,你可以檢查瀏覽器consloe ..

檢查控制檯(Chrome瀏覽器)。請按照下列步驟

step 1: right click on page in browser and click on Inspect Element 
step 2: click on cnsole tag. 

你可以在瀏覽器控制檯

enter image description here

1

enter image description here

就嘗試用腳本添加Jquery沿着這樣的:Demo

<script type='text/javascript' src='//code.jquery.com/jquery-2.1.3.js'></script>