Skip to main content

RESPONSIVE RETINA-READY MENU FOR WEBSITE





RESPONSIVE RETINA-READY MENU FOR WEBSITE




RESPONSIVE RETINA-READY MENU



Today we will create a colorful Retina-ready and responsive menu inspired by the colors of the Maliwan manufacturer of the Borderlands game. The menu automatically changes to one of three different layouts depending on the browser window size: a “desktop” inline version, a two columns tablet-optimized version and a mobile version with a menu link to display and hide the navigation for smaller screens. To make the menu fully retina-ready, we will use an icon font so that the icons of the menu won’t get pixelized on resize.





View the Demo of Retina Menu






RESPONSIVE RETINA-READY MENU FOR WEBSITE



View Demo!



THE HTML OF THE MENU




<nav  id="menu" class="nav">

    <ul>

        <li>

            <a  href="#" title="">

                <span  class="icon"> <i aria-hidden="true"  class="icon-home"></i></span><span>Home</span>

            </a>

        </li>

        <li>    

            <a href="#" title=""><span class="icon"> <i aria-hidden="true" class="icon-services"></i></span><span>Services</span></a>

        </li>

        <li>

            <a  href="#" title=""><span  class="icon"><i  aria-hidden="true" class="icon-portfolio"></i></span><span>Portfolio</span></a>

        </li>

        <li>

            <a  href="#" title=""><span  class="icon"><i  aria-hidden="true" class="icon-blog"></i></span><span>Blog</span></a>

        </li>

        <li>

            <a  href="#" title=""><span  class="icon"><i  aria-hidden="true" class="icon-team"></i></span><span>The  team</span></a>  

        </li>

        <li>

            <a  href="#" title=""><span  class="icon"><i  aria-hidden="true" class="icon-contact"></i></span><span>Contact</span></a>

        </li>

    </ul>

</nav>




Browser Support








Downlaod Source Code





Download the complete source code with html, CSS,and JavaScript from here.




Download Source!File Size:42.19 kb



PREPARING THE ICON FONT





Creating a custom icon font might look a bit complicated, but with tools like IcoMoon it’s just a matter of creating the icons and importing them into the tool. Icon fonts behave like any font, so you can easily change the color, adapt the size and it won’t get pixelized. Perfect for retina devices without having to use multiple assets for different screen resolutions.
The first thing we need to do is to create the icons for the menu. I use Illustrator, but any vector graphics editor like, for example Inkscape, will do. We need to create each icon and export them as a SVG file. To make sure the icon will work properly in every browser, we have to convert all lines into full objects, and merge all the objects into one big shape for each icon. Once all have been exported into nice SVG files, we can import them all into the IcoMoon App tool:










We can also enhance our font with icons from the big library that IcoMoon offers. Once we have all the icons we need, we click on the “Font” button at the bottom of the page to enter the detailed settings. On this page we can choose the encoding settings for the font, and also choose if we want to assign some letters for each icon, or prefer to use the Private Use Area of the font to make sure screen readers won’t be able to output them. I recommend using the default settings that work pretty well.










When we click on “Download” we get a ZIP file with 4 font formats (SVG, EOT, TTF and WOFF), the CSS styling and a demo page.


The first thing to do to be able to use the icons is to copy and paste the CSS IcoMoon provides to the top of our CSS file and make sure we also copy the font folder.


There’s also a little “hack” to make the fonts look nicer on Chrome Windows


you might want to check it out.






And that’s it, we’ve build a nice, touch-friendly and retina-ready navigation that works fine on desktop, tablet and mobile devices. Hope you liked it!



Labels:

Comments

Post a Comment

Feel free to leave your message here.

Popular posts from this blog

Bouncy Content Filter for big Website

This space-saving content filter allows the users to switch from one category to the other in a fancy way! Each click fires the rotation of the gallery images, revealing the items belonging to the selected category. Content filters  are particularly useful for big websites, where each pixel counts. Lets say you are showing the “ last products ” of your e-commerce . How about giving the users the option to switch to the “most popular” products without a page refresh? A good solution could be to hide the “most popular” items right behind the “last products”, then use the power of CSS3 3D Transforms to rotate the items when the user switches from one option to the other. The bounce effect is optional, but you get the idea! The rotation won’t work on older browsers like IE9, but the experience won’t be broken – just a display on/off with no transitions. Lets dive into the code! Creating the structure We wrapped the filter into a <nav> element. The filter structur...
Post a Comment
Read more

Side Team Member Biography Resource

Use this team member biography resource to insert extended descriptions of your team members, with no need of dedicated pages or modal windows. Let the user meet your team and trust your company! Sometimes a picture and a role are not enough to completely describe a team member; you need a more detailed description to make your team “real”! But this requires space… and you can gain it using CSS3 transformations . Just give a look at the smart solution found by Aquatilis : the description enters from the side, just like mobile application behaviour, with no need of page reload. Creating the structure We created a #cd-team section containing our team members preview: <section id="cd-team" class="cd-section"> <div class="cd-container"> <h2>Our team</h2> <ul> <li> <a href="#0" data-type="member-1"> <figure><!-- .... --></figure> <div class=...
Post a Comment
Read more

Pricing Table-Cross Reference Table for Website

Pricing Table-Cross Reference Table for Website.Tables are indispensable parts of web designs. They let you visually organise tabular content, distributing it on rows and columns. Although they are quite easy to design and code for large screens, things get more complicated on smaller devices. Whether it’s a subscription plan or a checkout process, you must deal with tables in your projects. And you must deal with responsiveness too. I’ve noticed some websites just cut off some columns to make their tables fits on a phone, but this solution doesn’t work in most cases (at least not if you need 5+ columns). I found this good example of a responsive table which inspired this resource: the list of features gets fixed on a side, allowing the user to horizontally scroll through the columns. Nice! Now why didn’t I use the HTML table structure , and instead went with unordered lists? It was difficult for me to make this resource responsive using proper table semantics (maybe an...
Post a Comment
Read more