将普通桌面菜单转换为选择选项菜单(用于移动版本)

Question

我有一个普通的桌面版本菜单，有3个级别。

对于智能手机和平板电脑版本，我尝试使用正常的选择选项菜单，因为我认为这在这些设备上工作得很好。

所以我试图将我的普通桌面菜单转换为选择选项菜单，但是我没有成功。

在我的正常菜单中，我使用href来放置我的链接，在选择选项中，我尝试使用值，但它不起作用。

你知道我怎么做吗?

我的例子:http://jsfiddle.net/jcak/33g70fae/2/

这是我的html:

<section id="menu-container">   
    <nav id="menu">
        <ul class="menu_desktop">
            <li><a href="javascript:void(0);"><span>Institution</span></a>
                <ul>
                    <li><a href="<?php setHome()?>/institution/values">Our Values</a></li>
                    <li><a class="fancybox_pdf" href="<?php setHome()?>/institution/team">Our Team</a></li>
                </ul>
            </li>   
            <li><a href="javascript:void(0);"><span>Our Work</span></a>
                <ul>
                    <li ><a href="<?php setHome()?>/works/webdesign">Web Design</a>
                        <ul>
                            <li><a href="<?php setHome()?>/works/webdesign/posters">Posters</a></li>
                            <li><a href="<?php setHome()?>/works/webdesign/websites">Websites</a></li>
                        </ul>
                    </li>
                    <li ><a href="<?php setHome()?>/works/3d">3d Modeling</a>
                        <ul>
                            <li><a href="<?php setHome()?>/works/3d/blender">Blender</a></li>
                            <li><a href="<?php setHome()?>/works/3d/studiomax">3d studio max</a></li>
                        </ul>
                    </li>
                    <li ><a href="<?php setHome()?>/works/video">Video</a>
                        <ul>
                            <li><a href="<?php setHome()?>/works/video/premiere">Premiere</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="javascript:void(0);"><span>Contacts</span></a>
                <ul>
                    <li><a href="<?php setHome()?>/contacts/north">North Seaat</a></li>
                    <li><a href="<?php setHome()?>/contacts/south">South Seat</a></li>
                </ul>
            </li>            
        </ul> 
        <select id="select"> 
            <option value="<?php setHome()?>" selected="selected">Menu</option> 
            <option value="<?php setHome()?>/agrupamento/institution">Institution</option> 
            <option value="">Our Work</option> 
            <option value="">Web Design</option> 
            <option value="">Posters</option> 
            <option value="">Website</option>  
            <option value="">3d modeling</option> 
            <option value="">blender</option> 
            <option value="">3d studio max</option> 
            <option value="">Video</option>
            <option value="">Premiere</option>
        </select>  
    </nav>
</section>

CSS:

#menu-container{
    width:100%;
    height:72px;
    float:left;
    float:left;
    background:green;
    border-bottom: 3px solid #ccc;  
}
#menu{
    width:300px;
    height:auto;
    margin:0 auto 0 auto;
}
.menu_desktop{display:none;}
#select{margin-top:20px;}

Answer 1

Js

select菜单

document.getElementById('select').onchange = function(){
//based on the values u give in options prepare the url n send it 
//to window.location.href
    window.location.href = this.value;
}

jsfiddle http://jsfiddle.net/harshdand/c42ovrt5/

输出http://jsfiddle.net/harshdand/c42ovrt5/embedded/result/

使用jquery

$(document).ready(function(){
    $('#select').on('change',function(){
        window.location.href = this.value;
    });
});