html - 按钮定位和下拉菜单

Question

又回来了另一个问题。我正在创建一个导航栏。我的最后一个 child 帐户，我想定位在菜单的底部，而不影响菜单中其他 li 元素的大小或定位。我已经尝试了很多东西，但认为 parent 的 relative 定位会干扰 child 的定位。另外，当它到达底部时，我需要下拉菜单成为下拉菜单。图你能告诉我一些指示吗？先感谢您! :) 这是我的代码和 jsfiddle.

<div class="logo"></div>

<ul class="menu">
  <li title="Dashboard"><a href="#" class="active dashboard"><i class="fa">     
</i>Dashboard</a></li>
  <li title="Servers"><a href="#" class="servers"><i class="fa"></i>Servers</a>
        <ul>
        <li class="title">Servers</li>
        <li><a href="#" class="active">View Virtual Servers</a></li>
        <li><a href="#">Add Virtual Server</a></li>
        </ul>
  </li>
  <li title="Clients"><a href="#" class="clients"><i class="fa"></i>Clients</a>
        <ul>
            <li class="title">Clients</li>
            <li><a href="#">View Clients</a></li>
            <li><a href="#">Add Client</a></li>
        </ul>
  </li>
  <li title="Billing"><a href="#" class="billing"><i class="fa"></i>Billing</a>
        <ul>
            <li class="title">Billing</li>
            <li><a href="#">View Orders</a></li>
            <li><a href="#">Add New Order</a></li>
            <li><a href="#">Transactions List</a></li>
            <li><a href="#">View Invoices</a></li>
        </ul>
  </li>
  <li title="Support Tickets"><a href="#" class="supptickets"><i class="fa"></i>Support Tickets</a>
        <ul>
            <li class="title">Support Tickets</li>
            <li><a href="#">All Tickets</a></li>
            <li><a href="#">Open Tickets</a></li>
            <li><a href="#">Answered Tickets</a></li>
        </ul>
  </li>  
  <li title="IPBlocks"><a href="#" class="ipblocks"><i class="fa"></i>IP Blocks</a>
        <ul>
            <li class="title">IP Blocks</li>
            <li><a href="#">View IP Blocks</a></li>
            <li><a href="#">Add IPV4 Block</a></li>
            <li><a href="#">Add IPV6 Block</a></li>
        </ul>
  </li>
  <li title="Nodes"><a href="#" class="nodes"><i class="fa"></i>Nodes</a>
        <ul>
            <li class="title">Nodes</li>
            <li><a href="#">View Nodes</a></li>
            <li><a href="#">Add Nodes</a></li>
            <li><a href="#">Node Groups</a></li>
        </ul>
  </li>
  <li title="Plans"><a href="#" class="plans"><i class="fa"></i>Plans</a>
        <ul>
            <li class="title">Plans</li>
            <li><a href="#">View Plans</a></li>
            <li><a href="#">Add Plan</a></li>
        </ul>
  </li>
  <li title="Settings"><a href="#" class="settings"><i class="fa"></i>Settings</a>
        <ul>
            <li class="title">Settings</li>
            <li><a href="#">Configuration</a></li>
            <li><a href="#">Email Templates</a></li>
            <li><a href="#">Administrators</a></li>
            <li><a href="#">API Access</a></li>
            <li><a href="#">System Backup</a></li>
            <li><a href="#">Backup Servers</a></li>
        </ul>
  </li>
  <li title="Tools"><a href="#" class="tools"><i class="fa"></i>Tools</a>
        <ul>
            <li class="title">Tools</li>
            <li><a href="#">Database</a></li>
            <li><a href="#">Email</a></li>
            <li><a href="#">Sessions</a></li>
        </ul>
  </li>
  <li title="Logs"><a href="#" class="logs"><i class="fa"></i>Logs</a>
        <ul>
            <li class="title">Logs</li>
            <li><a href="#">System Messages</a></li>
            <li><a href="#">Client Log</a></li>
            <li><a href="#">Client Activity</a></li>
            <li><a href="#">Admin Log</a></li>
            <li><a href="#">Authentication Log</a></li>
            <li><a href="#">API Log</a></li>
            <li><a href="#">System Email Log</a></li>
        </ul>
  </li>
  <li title="Reports"><a href="#" class="reports"><i class="fa"></i>Reports</a>
        <ul>
            <li class="title">Reports</li>
            <li><a href="#">Annual Income Report</a></li>
            <li><a href="#">Monthly Sales</a></li>
            <li><a href="#">Product Sales</a></li>
            <li><a href="#">New Customers</a></li>
            <li><a href="#">Server Uptime</a></li>
        </ul>
  </li>
  <li title="Account"><a href="#" class="account"><i class="fa"></i>Account</a>
        <ul>
            <li class="title">Account</li>
            <li><a href="#">Change Password</a></li>
            <li><a href="#">Logout</a></li>
        </ul>
  </li>
  </ul>

CSS

    @import url('http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css'); /* Le Font Awesome Iconz */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300); /* Le Font */
/* Le Main Menu */
.menu {
    position: fixed;
    top: 64px;
    left: 0;
    height: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    background: #303641;
    z-index:10;  
    box-shadow: 2px 0 18px rgba(0, 0, 0, 0.26);
    -moz-box-shadow:    2px 0 18px rgba(0, 0, 0, 0.26);
    -webkit-box-shadow: 2px 0 18px rgba(0, 0, 0, 0.26);
}
.menu > li {
    position: relative;
}

.menu > li > a {
    display: block;
    text-indent: -500em;
    height: 2.5em;
    width: 4em;
    line-height: 2.5em;
    text-align: center;
    color: #aaabae;
    position: relative;
    border-bottom: 1px solid rgba(170, 171, 174, 0.15);
}
/* Le Logo */
.logo {
    display: block;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    background: #303641 url('../img/logo.png') no-repeat center;
    height: 4em;
    width: 4em;
    position: fixed;
    z-index: 11;
    border-bottom: 1px solid rgba(170, 171, 174, 0.15);
    box-shadow: 2px -6px 18px rgba(0, 0, 0, 0.26);
    -moz-box-shadow:    2px -6px 18px rgba(0, 0, 0, 0.26);
    -webkit-box-shadow: 2px -6px 18px rgba(0, 0, 0, 0.26);
}
/* Flyout */
.menu ul {
    display: none;
    position: absolute;
    top: 0;
    left: 4em;
    width: 10em;
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.menu li:hover ul {
    display: block;
}
.menu li:hover ul li a {
    display: block;
    background: #2b303a;
    color: #aaabae;
    line-height: 3em;
    width: 18.7em;
    padding-left: 8px;
    text-align: left;
    text-decoration: none;
    font-size: 12px;
    font-family: 'Open Sans:300', sans-serif;
    border-bottom: 1px solid rgba(170, 171, 174, 0.15);
    border-left: 1px solid rgba(170, 171, 174, 0.15);
    border-right: none;
}
.title {
    display: block;
    background: #303641;
    color: #aaabae;
    line-height: 3.4em;
    width: 18.7em;
    padding-left: 8px;
    text-align: left;
    text-decoration: none;
    font-size: 12px;
    font-family: 'Open Sans:300', sans-serif;
    border-bottom: 1px solid rgba(170, 171, 174, 0.15);
    border-left: 1px solid rgba(170, 171, 174, 0.0);
    border-right: none;
}
/* Le Flyout Box Corner Radius */
.menu li:hover ul li:first-child {
    border-top-right-radius: 0.3em;
    -moz-border-radius-topright: 0.3em;
    -webkit-border-top-right-radius: 0.3em;
}
.menu li:hover ul li:last-child a {
    border-bottom-right-radius: 0.3em;
    -moz-border-radius-bottomright: 0.3em;
    -webkit-border-bottom-right-radius: 0.3em;
}
.menu li:hover ul li:first-child a {
    border-left: 1px solid rgba(0,0,0, 0.0);
}
/* Le Menu Icons */
.menu li a i:before {
    font-family: FontAwesome;
    padding-top: 1em;
    speak: none;
    text-indent: 0em;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: .8em;
}
.menu li a.servers i:before {
  content: "\f0c2";
}
.menu li a.nodes i:before {
  content: "\f1b3";
}
.menu li a.clients i:before {
  content: "\f0c0";
}
.menu li a.supptickets i:before {
  content: "\f0e0";
}
.menu li a.ipblocks i:before {
  content: "\f009";
}
.menu li a.dashboard i:before {
  content: "\f0e4";
}
.menu li a.plans i:before {
  content: "\f03a";
}
.menu li a.settings i:before {
  content: "\f085";
}
.menu li a.tools i:before {
  content: "\f0ad";
}
.menu li a.logs i:before {
  content: "\f15c";
}
.menu li a.billing i:before {
  content: "\f155";
}
.menu li a.reports i:before {
  content: "\f080";
}
.menu li a.account i:before {
  content: "\f007";
}
/* Le Hover & Active States */
.menu li a:hover {
    display: block;
    color: #fff;
    transition: color 0.4s ease-in-out;
}
.menu li ul li a:hover {
    display: block;
    color: #fff;
    transition: color 0.4s ease-in-out;
}
.menu li a.active {
    display: block;
    color: #fff;
}
.menu li:hover ul li a.active {
    display: block;
    color: #fff;
}

Answer 1

这是不可能通过 CSS 实现的。

你需要 jquery 来完成这个技巧。

$(function () {
    var lastEle = $("ul > li[title]:last-child").offset().top;
    var windowHeight = $(window).height();
    if (lastEle > windowHeight) {
        var numberOfLi = $("ul > li[title]").length;
        var heightOfLi = ((windowHeight - 65) / numberOfLi);
        $("ul > li[title]").css({
            height: heightOfLi
        });
    } else {
        $("ul > li[title]:last-child")
            .css({
            position: "absolute",
            bottom: "65px",
            "border-top": "1px solid rgba(170, 171, 174, 0.15)"
        });
    }

    $("li").hover(function () {
        var liHeight = $(this).offset().top;
        var ulHeight = $(this).find("ul").height();
        if ((windowHeight - liHeight) < ulHeight) {
            $(this).find('ul').css({
                bottom: 0,
                top: "inherit"
            });
        } else {
            $(this).find('ul').css({
                bottom: "inherit",
                top: 0
            });

        }
    });
});

它不仅适用于 Accounts，还适用于底部的所有链接。

根据您当前的设计，底部带有子菜单的任何链接都将被隐藏。所以这个脚本将检查高度并根据屏幕的高度向上或向下移动。

---> DEMO <---