Navigation Menu

image
Main zul file

<zk>
<style src="/style.css" />
    <window border="none" width="100%" height="100%">
        <separator />
        <div left="20px" height="25px">
            <image src="/images/logo3a.jpg"
                style="padding-left: 10px;" height="30px" width="auto" />
        </div>
        <separator />
        <borderlayout>
            <north id="north" border="0" height="9%" flex="true">
                <div id="Menu" sclass="Mainmenudiv" height="90%">
                    <include src="menu.zul" />
                </div>
            </north>
            <west title=" " size="16%" flex="true" splittable="true"
                collapsible="true">
                <div id="nav" style="background:white; height:100%">
                    
                </div>
            </west>
            <center border="0">
                <div height="99%" id="Screen">
                    
                </div>
            </center>
            <south height="70px">
                <div align="center">
                    <label
                        value="Copyright © 2012 xxxxx All Rights Reserved. Powered By xxxx"
                        sclass="loginlabel" />
                </div>
            </south>
        </borderlayout>
    </window>
</zk>






Menu zul file

<?page title="" contentType="text/html;charset=UTF-8"?>
<zk>
    <window>
        <tabbox width="100%" sclass="mainmenu">
            <tabs id="tabs">
                <tab label="Our Product" sclass="menutabs" />
                <tab label="Live Demo" sclass="menutabs" />
                <tab label="Online Documentation" sclass="menutabs" />
                <tab label="Downloads" sclass="menutabs" />
                <tab label="Support" sclass="menutabs" />
            </tabs>
            <tabpanels sclass="mytabpanel">
                <tabpanel>
                    <toolbar sclass="maintoolbar">
                        <toolbarbutton label="Product 1" sclass="maintoolbarbtn"/>
                        <toolbarbutton label="Product 2" sclass="maintoolbarbtn"/>
                        <toolbarbutton label="Product 3" sclass="maintoolbarbtn"/>
                    </toolbar>
                </tabpanel>
                <tabpanel>
                    <toolbar sclass="maintoolbar">
                        <toolbarbutton label="Live Demo 1" sclass="maintoolbarbtn"/>
                        <toolbarbutton label="Live Demo 2" sclass="maintoolbarbtn"/>
                        <toolbarbutton label="Live Demo 3" sclass="maintoolbarbtn"/>
                        <toolbarbutton label="Live Demo 4" sclass="maintoolbarbtn"/>
                        <toolbarbutton label="Live Demo 5" sclass="maintoolbarbtn"/>
                        <toolbarbutton label="Live Demo 6" sclass="maintoolbarbtn"/>
                    </toolbar>
                </tabpanel>
                <tabpanel>
                    <toolbar sclass="maintoolbar">
                        <toolbarbutton label="Documentation 1" sclass="maintoolbarbtn"/>
                        <toolbarbutton label="Documentation 2" sclass="maintoolbarbtn"/>
                        <toolbarbutton label="Documentation 3" sclass="maintoolbarbtn"/>
                        <toolbarbutton label="Documentation 4" sclass="maintoolbarbtn"/>
                        <toolbarbutton label="Documentation 5" sclass="maintoolbarbtn"/>
                    </toolbar>
                </tabpanel>
                <tabpanel>
                    <toolbar sclass="maintoolbar">
                        <toolbarbutton label="Download 1" sclass="maintoolbarbtn"/>
                        <toolbarbutton label="Download 2" sclass="maintoolbarbtn"/>
                        <toolbarbutton label="Download 3" sclass="maintoolbarbtn"/>
                        <toolbarbutton label="Download 4" sclass="maintoolbarbtn"/>
                        <toolbarbutton label="Download 5" sclass="maintoolbarbtn"/>
                    </toolbar>
                </tabpanel>
                <tabpanel>
                    <toolbar sclass="maintoolbar">
                        <toolbarbutton label="Support 1" sclass="maintoolbarbtn"/>
                        <toolbarbutton label="Support 2" sclass="maintoolbarbtn"/>
                        <toolbarbutton label="Support 3" sclass="maintoolbarbtn"/>
                        <toolbarbutton label="Support 4" sclass="maintoolbarbtn"/>
                        <toolbarbutton label="Support 5" sclass="maintoolbarbtn"/>
                    </toolbar>
                </tabpanel>
            </tabpanels>
        </tabbox>
    </window>
</zk>


CSS File

/* Start: Main Tabs Menu
---------------------------------------------- */
.Mainmenudiv {
    background-image: url('./images/menubgsmall.png');
    background-position: top center;
}

.menutabs.z-tab .z-tab-text {
    color: white;
    cursor: pointer;
    font-family: arial, sans-serif;
    font-size: 12px;
    font-size-adjust: none;
    font-weight: bold;
    padding: 4px 14px;
    white-space: nowrap;
}

.menutabs.z-tab .z-tab-hl:hover .z-tab-text {
    padding: 6px 14px;
    color: yellow;
    font-weight: bold;
}

.mainmenu.z-tabbox .z-tab .z-tab-hm {
    background-image: url('./images/blank_p.gif');
    background-color: transparent;
    background-position: center;
    background-repeat: repeat;
    height: 36px;
}

.mainmenu.z-tabbox .z-tab .z-tab-hm:hover {
    background-image: url('./images/blank_over_p.gif');
    background-color: transparent;
    background-position: center;
    background-repeat: repeat-X;
    height: 36px;
    padding: none;
    margin: none;
}

.mainmenu.z-tabbox .z-tab-seld .z-tab-hm {
    background-image: url('./images/current-bg.png');
    background-color: transparent;
    background-position: center;
    background-repeat: repeat-X;
    height: 36px;
    padding: none;
    margin: none;
}

.mainmenu.z-tabbox .z-tab .z-tab-hl {
    background-image: url('./images/blank_p.gif');
    background-color: transparent;
    background-position: left;
    background-repeat: repeat;
    height: 36px;
}

.mainmenu.z-tabbox .z-tab .z-tab-hl:hover {
    background-image: url('./images/blank_over_p.gif');
    background-color: transparent;
    background-position: left;
    background-repeat: repeat;
    height: 36px;
    padding: none;
    margin: none;
}

.mainmenu.z-tabbox .z-tab-seld .z-tab-hl {
    background-image: url('./images/current-bg.png');
    background-color: transparent;
    background-position: center;
    background-repeat: repeat-X;
    height: 36px;
    padding: none;
    margin: none;
}

.mainmenu.z-tabbox .z-tab .z-tab-hr {
    background-image: url('./images/blank_p.gif');
    background-color: transparent;
    background-position: right;
    background-repeat: repeat;
    height: 36px;
}

.mainmenu.z-tabbox .z-tab .z-tab-hr:hover {
    background-image: url('./images/blank_over_p.gif');
    background-color: transparent;
    background-position: right;
    background-repeat: repeat;
    height: 36px;
}

.mainmenu.z-tabbox .z-tab-seld .z-tab-hr {
    background-image: url('./images/current-bg.png');
    background-color: transparent;
    background-position: center;
    background-repeat: repeat-X;
    height: 36px;
    padding: none;
    margin: none;
}

.mainmenu.z-tab .z-tab-hl:hover .z-tab-hr {
    background-position: right 0;
}

.mainmenu.z-tab .z-tab-hl:hover .z-tab-hl {
    background-position: left 0;
}

.mainmenu.z-tab .z-tab-hl:hover .z-tab-hm {
    background-position: center 0;
}

.mytabpanel.z-tabpanel {
    border-top: none;
}


.mytabpanel .z-tabpanel, .mytabpanel .z-tabbox-ver .z-tabpanel-ver {
    padding: 0px;
}

.mytabpanel.z-tabpanel,.z-tabbox-ver .z-tabpanels-ver {
    border-color: transparent;
    border-style: solid;
    border-width: 1px;
}

.z-tabs-header {
    height: 32px;
    margin: 0;
    overflow: hidden;
    position: relative;
    height: 32px;
}

.maintoolbar.z-toolbar {
    border-color: transparent;
    border-style: solid;
    border-width: 0 0 1px;
    display: block;
    padding: 2px;
    position: relative;
}

.z-toolbar .maintoolbarbtn .z-toolbarbutton-cnt  {
    color: #000000;
    font-family: Tahoma, verdana;
    font-size: 1em;
    font-weight: Bold;
    padding: 2px 10px 2px 10px;
    position: relative;
    border-left: 0px solid #dddddd;
    border-right: 0px solid #eeeeee;
    border-top: 0px solid #e0e0e0;
}

.maintoolbar.z-toolbar  {
    background: none;
    height: 18px;
}

.maintoolbarbtn.z-toolbarbutton-over .z-toolbarbutton-cnt  {
    background-image: none;
    background-color: #cff791;
}

 


/* End: Main Tabs Menu 
---------------------------------------------- */



Download source