变化李有序列表是选择

我有这样的HTML菜单：变化李有序列表是选择

<div id="CustomerMenu"> 
<ul> 
<li><a href="/my-integra/">Home</a></li> 

<li><a href="/my-integra/?id=myaccount">Account</a> 
    <ul> 
     <li><a href="/my-integra/?id=contacts">Contacts</a></li> 
     <li><a href="/my-integra/?id=viewcontact&seq=<?php echo $_SESSION["integra-uk.net"]["contact"]; ?>">My Contact</a></li> 
     <li><a href="/my-integra/?id=myaccount">Company Details</a></li> 
    </ul> 
</li> 
<li><a href="/my-integra/?id=billing">Billing</a> 
    <ul> 
     <li><a href="/my-integra/?id=invoices">Invoices</a></li> 
    </ul> 
</li> 
<li><a href="/my-integra/?id=tickets">Tickets</a> 
    <ul> 
     <li><a href="/my-integra/?id=openticket">Open Ticket</a></li> 
    </ul> 
</li> 
<?php 
if($SettingsCustomer["reseller"] == 'Y') { 
    echo '<li><a href="/my-integra/?id=reseller_customers">My Customers</a></li>'; 
} 
?> 

<li><a href="/my-integra/?id=logout">Logout</a> 
</ul> 
</div>

我怎样才能改变CSS中使用这个媒体查询显示选择元素时，屏幕尺寸达到一定宽度？

来源

2014-12-04 user2710234

你必须让两个菜单一个时隐时现的台式机和一个时隐时现移动：

随意在这里测试：http://jsfiddle.net/uc3eLazc/1/

CSS：

// DESKTOP 
    .mobile 
    { 
     display:none; 
    } 

     .desktop 
    { 
     display:block; 
    } 

// MOBILE 
    @media screen and (max-width: 300px) { 
     .mobile 
    { 
     display:block; 
    } 
     .desktop 
    { 
     display:none; 
    } 

    }

HTML：

<div id="CustomerMenu" class="desktop"> 
    <ul> 
     <li><a href="/my-integra/">Home</a></li> 
     <li><a href="/my-integra/?id=myaccount">Account</a> 
    </ul> 
</div> 

<select id="ListeElement" class="mobile"> 
    <option value="valeur1">Option 1</option> 
    <option value="valeur2">Option 2</option> 
</select>

来源

2014-12-04 12:47:56 clement

我想改变的CSS菜单是一个选择元素 – user2710234 2014-12-04 12:53:14

@ user2710234看到我更新 – clement 2014-12-04 12:58:12

检查这个JS代码 - http://pastebin.com/mUEc9i3t - 这个变化它我nto select元素，有没有什么办法，我可以把子项目 - 旁边的他们在左边，所以它显示为子项目？ – user2710234 2014-12-04 13:19:22

只能使用媒体查询，不能简单地将UL更改为SELECT菜单。

你可以做的是使用插件像TinyNav来实现这一目标：

http://tinynav.viljamis.com/

的说明都在页面上，但你基本上包括他们的脚本，然后使用类似这样的代码来激活它伴随着调用JS等：

/* styles for desktop */ 
.tinynav { display: none } 

/* styles for mobile */ 
@media screen and (max-width: 600px) { 
    .tinynav { display: block } 
    #nav { display: none } 
}

来源

2014-12-04 12:54:21

变化李有序列表是选择

回答

相关问题