Question

我有这个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中使用媒体查询更改此设置，以便在屏幕大小达到一定宽度时显示选择元素？

Answer 1

您必须在桌面时隐藏两个菜单，在移动时隐藏一个菜单：

欢迎在此处测试：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>

Answer 2

您不能仅使用媒体查询将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 }
}

更改li有序列表进行选择

2 个答案: