.:: CODE SNIPPET ::.

"Your time is limited, so don't waste it living someone else's life"

How to create a tree main menu in grails


Build the GSP page contain the menu with one div tag named mainMenu

<body>
    <div id="spsLogo" role="banner">
        <a href="http://tranhoangminh.vn"><asset:image src="sps_logo.png" alt="Code Snippet" /></a>
    </div>
    <sec:ifLoggedIn>
        <div class="mainMenu">
            <ul>
                <li><a href="${createLink(uri: '/')}" style="text-decoration: none;"> Home</a></li>
                <li><a href="#">Resource </a>
                    <ul>
                        <li><a href="${createLink(action:'index', controller:'customer')}" style="text-decoration: none">Customer</a></li>
                        <li><a href="${createLink(action:'index', controller:'project')}" style="text-decoration: none">Project</a></li>
                        <li><a href="${createLink(action:'index', controller:'document')}" style="text-decoration: none">Document</a></li>
                        <li><a href="${createLink(action:'index', controller:'contact')}" style="text-decoration: none">Contact</a></li>
                    </ul></li>
                <li><a href="${createLink(action:'index', controller:'Search')}">Search</a></li>
                <li><a href="#">Manager</a>
                    <ul>
                        <li><a href="${createLink(action:'viewUser', controller:'User')}" style="text-decoration: none">Add User </a></li>
                        <li><a href="${createLink(action:'viewRole', controller:'User')}" style="text-decoration: none">Manager Role </a></li>
                    </ul></li>
            </ul>
        </div>
    </sec:ifLoggedIn>
    <g:layoutBody />

    <div class="footer" role="contentinfo">
        <small>&copy; Copyright 2014 CRM | Powered by &nbsp;<a>SPS VietNam</a></small>
    </div>
    <div id="spinner" class="spinner" style="display: none;">
        <g:message code="spinner.alt" default="Loading&hellip;" />
    </div>
</body>


Secondly, layout it with css file named main.css

.mainMenu{
    position: absolute;
}
.mainMenu ul {
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 1;
}

.mainMenu ul li {
    display: block;
    position: relative;
    float: left;
}

.mainMenu li ul {
    display: none;
}

.mainMenu ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 5px 15px 5px 15px;
    background: #1e7c9a;
    margin-left: 1px;
    white-space: nowrap;
}

.mainMenu ul li a:hover {
    background: #3b3b3b;
}

.mainMenu li:hover ul {
    display: block;
    position: absolute;
}

.mainMenu li:hover li {
    float: none;
    font-size: 13px;
}

.mainMenu li:hover a {
    background: #3b3b3b;
}

.mainMenu li:hover li a:hover {
    background: #1e7c9a;
}
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: