How to create top navgination menues like that on website ext.net

  1. #1

    How to create top navgination menues like that on website ext.net

    Is it possible to create a top nav bar like that appears on the top of the page of the [website ext.net? I have tried to use ext-toolbar, but it is not as nice as this one. Please advise.
    Attached Thumbnails Click image for larger version. 

Name:	top.png 
Views:	15 
Size:	22.5 KB 
ID:	25523  
  2. #2
    Hello @adham, and welcome to Ext.NET forums!

    As your post is a request for an example instead of providing an actual example/extra, I moved your thread from General > Examples and Extras to Community > 7.x Classic Help.

    The Ext.NET website itself is not an Ext.NET application, so it uses other resources and CSS styling.

    Notwithstanding, with Ext.NET 7 and the exclusive Spotless theme, the result seen in our website would be just a few CSS styles away; a good start would be using the menuBar component:

    <ext-menuBar>
        <items>
            <ext-menuItem text="Download" />
            <ext-menuItem text="Pricing" />
            <ext-menuItem text="Support">
                <menu>
                    <ext-menu>
                        <items>
                            <ext-menuItem text="Examples Explorer" />
                            <ext-menuItem text="Forums" />
                            <ext-menuItem text="Docs" />
                            <ext-menuItem text="FAQ" />
                            <ext-menuItem text="GitHub Issues" />
                            <ext-menuSeparator />
                            <ext-menuItem text="Legacy WebForms Examples" />
                            <ext-menuItem text="Legacy MVC Examples" />
                            <ext-menuSeparator />
                            <ext-menuItem text="Identity Guidelines" />
                            <ext-menuItem text="Contact" />
                        </items>
                    </ext-menu>
                </menu>
            </ext-menuItem>
            <ext-menuItem text="Blog" />
            <ext-menuItem text="Themes" />
        </items>
    </ext-menuBar>
    And then, to add the extra effects in the website, these CSS style overrides would take the example very close to what the website is:

    <style type="text/css">
        /* Match the font size */
        .x-menu-item-text-default-menubar, .x-menu-item-text-default {
            font-size: 16px
        }
    
        /* Match the menuitem hover effect*/
        .x-menu-item-default-menubar.x-menu-item-active, .x-menu-item-default-menubar.x-menu-item-focus {
            background-color: transparent
        }
        .x-menu-item-default-menubar.x-menu-item-active a>span, .x-menu-item-default-menubar.x-menu-item-focus a>span {
            background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiA0Ij4KICA8cGF0aCBkPSJNMCAwSDMyVjRIMFoiIGZpbGw9IiNlMWVkZmYiLz4KPC9zdmc+") bottom center no-repeat;
            background-size: 32px 4px;
            bottom: -1rem;
            height: 45px
        }
    
        /* Match the menu expander icon */
        .x-menu-item-arrow-default-menubar:before {
            content: "_";
            background: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjNDI4NGZiIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDE2Yy0uMjYgMC0uNTEtLjEtLjcxLS4yOWwtNi02QS45OTYuOTk2IDAgMTE2LjcgOC4zbDUuMyA1LjI5IDUuMjktNS4yOWEuOTk2Ljk5NiAwIDExMS40MSAxLjQxbC02IDZjLS4xOS4xOS0uNDQuMjktLjcuMjl6Ij48L3BhdGg+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiI+PC9wYXRoPjwvc3ZnPg==") center center no-repeat;
            background-size: 16px 16px
        }
    </style>
    Above, I have transformed the dash highlight that shows below the selected menu entry into a SVG square, so we could replace it with the background highlight without the need of extra DOM elements. That would be possible, by changing instead the DOM template the component defines.

    The unencoded first SVG in an HTML block:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 4">
        <path d="M0 0H32V4H0Z" fill="#e1edff"/>
    </svg>
    The second encoded SVG string is just a copy-paste of the one in Ext.NET WebSite pulling the color from its CSS references:

    <svg fill="#4284fb" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M12 16c-.26 0-.51-.1-.71-.29l-6-6A.996.996 0 116.7 8.3l5.3 5.29 5.29-5.29a.996.996 0 111.41 1.41l-6 6c-.19.19-.44.29-.7.29z"/>
        <path fill="none" d="M0 0h24v24H0z" />
    </svg>
    Hope this helps!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 2
    Last Post: May 20, 2016, 9:04 AM
  2. Replies: 3
    Last Post: Mar 05, 2015, 8:28 AM
  3. Can't download Ext.net 2.5.0 on your website
    By Cyberspirit in forum 2.x Help
    Replies: 2
    Last Post: Mar 06, 2014, 2:23 PM
  4. Replies: 1
    Last Post: May 27, 2013, 2:21 PM
  5. Ext.NET website looking good
    By jchau in forum Open Discussions
    Replies: 1
    Last Post: Dec 13, 2012, 10:01 PM

Tags for this Thread

Posting Permissions