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

An AJAX Based Shopping Cart with Drap Drop Item Effect

An AJAX Based Shopping Cart In this tutorial we will create an AJAX Based Shopping Cart with Drag and Drop feature.You can easily use this shopping cart in you store.All the products are going to be stored in a MySQL database, with PHP showing and processing the data. So go ahead, download the demo files and start reading. Step 1 – the MySQL Database If you want to set up a working demo, you’ll need to execute the following SQL code in your database manager (e.g. phpMyAdmin). It will set up the table and insert a few products. The code is also available in table.sql in the demo files. table.sql CREATE TABLE IF NOT EXISTS `internet_shop` ( `id` int ( 6 ) NOT NULL auto_increment, `img` varchar ( 32 ) collate utf8_unicode_ci NOT NULL default '' , `name` varchar ( 64 ) collate utf8_unicode_ci NOT NULL default '' , `description` text collate utf8_unicode_ci NOT NULL , `price` double NOT NULL default '0' , PRIMARY K...
Post a Comment
Read more

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

Content slider with Zoom Effect for a predefined area in each slide

Zoom Slider Today’s Blueprint is a simple content slider with depth-like zoom functionality. Each slide has a predefined zoom area that will be used to calculate the appropriate scale value for a fullscreen fill. Once the icon for zooming is clicked, the zoom area as well as the page get scaled, creating the illusion that the viewer is approaching the item. Once the whole page is covered, we show some more details. Navigating the slider will animate the inner parts of the slide, allowing for an independent control of the image area and the title. We are using CSS transitions and dymanic.js for moving the slide elements. Dymanic.js by Michaël Villar is a JavaScript library to create physics-based animations. Please note that we are using a couple of modern CSS properties, so only contemporary browsers are supported. The HTML <!-- Main container --> <div class="container"> <!-- Blueprint header --> <header class="bp-header cf"> ...
Post a Comment
Read more