Horizontal menu cut off

This public forum is for user-to-user discussions of PHPMaker. Note that this is not support forum.
Post Reply
sticcino
User
Posts: 1043

Horizontal menu cut off

Post by sticcino »

Noticing with horizontal menu the last item on right side, when displaying the sub menu items doesn't flip itself to the left to display the items but instead displays half cut off the screen.

Are there any flags to auto sence if it should display the sub menu to left or right side?


mobhar
User
Posts: 11660

Post by mobhar »

You may implement the logic from the following simple example:

//// CSS file: /////
#nav ul {
padding:0;
margin:0;
list-style:none;
}
#nav ul li {
float:left;
border:1px solid #fff;
margin:0 30px;
position: relative;
}
#nav ul li a {
display:block;
padding:10px 6px;
position:relative;
}
#nav ul li:hover {
border-left:1px solid #E9E9E9;
border-right:1px solid #E9E9E9;
border-top:1px solid #E9E9E9;
}
#nav ul li ul {
display:none;
}
#nav ul li:hover ul {
display:block;
position:absolute;
z-index: 10;
background:#fff;
width:150px;
border:0;
}
#nav ul li ul li {
display:block;
position:relative;
border:none;
float:none;
margin:0;
left:-1px;
}
#nav ul li ul li:hover {
border:none;
background:#F7F9FB;
}
#nav ul li ul li a {
padding:10px;
border:1px solid #E9E9E9;
}
#nav ul li:last-child ul {
right: 0;
background:white;
}
#nav ul li:last-child ul li{
left:1px;
}

//// HTML file: ///////
<div id="nav">
<ul>
<li><a href="#">Menu1</a>

        <ul>
            <li><a href="menu.html">Item1</a>
            </li>
            <li><a href="menu.html">Item2</a>
            </li>
            <li><a href="menu.html">Item3</a>
            </li>
            <li><a href="menu.html">Item4</a>
            </li>
        </ul>
    </li>
    <li><a href="#">Menu2</a>

        <ul>
            <li><a href="menu.html">Item1</a>
            </li>
            <li><a href="menu.html">Item2</a>
            </li>
            <li><a href="menu.html">Item3</a>
            </li>
            <li><a href="menu.html">Item4</a>
            </li>
        </ul>
    </li>
    <li><a href="#">Menu3</a>

        <ul>
            <li><a href="menu.html">Item1</a>
            </li>
            <li><a href="menu.html">Item2</a>
            </li>
            <li><a href="menu.html">Item3</a>
            </li>
            <li><a href="menu.html">Item4</a>
            </li>
        </ul>
    </li>
</ul>

</div>
<div style='clear: both;margin-bottom:5px;'></div>
<div style='border-top:1px solid navy;'></div>


mobhar
User
Posts: 11660

Post by mobhar »

Or you may search for other similar logic from Google "submenu align right of last parent horizontal menu item"


Post Reply