www.webdeveloper.com
Results 1 to 4 of 4

Thread: Responsive sprite menu

  1. #1
    Inga.'s Avatar
    Inga. is offline Motstånd är meningslöst
    Join Date
    Dec 2008
    Location
    Sweden
    Posts
    65

    Responsive sprite menu

    I'm updating an old site and the menu is done with css rollover sprites- a different one for each menu item. The issue is that is is not responsive, of course. I've been googling for ways to do a responsive sprite menu with no real help the last few days (including a site search here, so if I missed an existing answer, sorry). I have to keep the rollovers in the menu since it's very important to the client to have them. How do I do this?

    Here is the old menu, circa 2009. It was obviously not any sort of best practice setup then, but I cannot figure out how to update it to be responsive or even how to do a responsive sprite menu from scratch. Seems not many use unique rollovers for anything anymore, but I have to have them. Any help would be really appreciated.
    https://dl.dropboxusercontent.com/u/...lates/nav.html
    Code:
    <style>
    body {
    	background-color:#000;
    }
    #nav {
    	overflow:hidden;
    	width:auto;
    	margin:0;
    /*	padding:10px 25px 5px 25px;*/
    	text-align:center;
    	background:url(../images/menu_background.jpg) repeat;
    } 
    ul#topnav {
    	margin: 0; padding: 0;
    	padding-left:25px;
    	list-style: none;
    	float: left;
    	width:auto;
    	font-size:10px;
    }
    ul#topnav li {
    	float: left;
    	margin: 0; padding: 0;
    	width:95px;
    }
    ul#topnav a {
    	float: left;
    	display: block;
    	height: 95px;
    	background-position: left top;
    	color:#fff;
    	text-indent: -99999px;
    	overflow:hidden;
    }
    /*--CSS Sprites - Hover State--*/
    ul#topnav a:hover {
    	background-position: left -95px;
    }
    /*--Assign an image and width to each link--*/
    ul#topnav li.lackkonservering a {
    	background-image: url(../images/button_ditec.jpg);
    	width: 95px;
    }
    ul#topnav li.protec a {
    	background-image: url(../images/button_protec.jpg);
    	width: 95px;
    }
    ul#topnav li.glastec a {
    	background-image: url(../images/button_glastec.jpg);
    	width: 95px;
    }
    ul#topnav li.falgbehandling a {
    	background-image: url(../images/button_falg.jpg);
    	width: 95px;
    }
    ul#topnav li.lackskydd a {
    	background-image: url(../images/button_lack.jpg);
    	width: 95px;
    }
    ul#topnav li.drheadlamp a {
    	background-image: url(../images/button_drhead.jpg);
    	width: 95px;
    }
    ul#topnav li.tvattservice a {
    	background-image: url(../images/button_tvatt.jpg);
    	width: 95px;
    }
    ul#topnav li.rekonditionering a {
    	background-image: url(../images/button_rekond.jpg);
    	width: 95px;
    }
    ul#topnav li.solfilm a {
    	background-image: url(../images/button_solfilm.jpg);
    	width: 95px;
    }
    ul#topnav li.ovriga a {
    	background-image: url(../images/button_ovrigt.jpg);
    	width: 95px;
    }
    #lackkonservering li.lackkonservering a,
    #protec li.protec a,
    #services li.glastec a,
    #portfolio li.falgbehandling a,
    #contact li.lackskydd a,
    #blog li.drheadlamp a
    #blog li.tvattservice a
    #blog li.rekonditionering a
    #blog li.solfilm a
    #blog li.ovriga a
    {
    	background-position: left bottom;
    }
    .clearfloat { 
    	clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }
    #navtext {
    	margin: 0; padding: 0;
    	width:auto;
    	background:url(../images/menu_background.jpg) repeat;
    	text-align:left;
    	padding-bottom:5px;
    }
    .navlack {
    	float:left;
    	overflow:hidden;
    	width:100px;
    	padding-left:20px;
    	font-size:11px;
    	text-align:center;
    	color:#fff;
    }
    .navprotec {
    	float:left;
    	overflow:hidden;
    	width:95px;
    	padding-left:0;
    	padding-top:5px;
    	font-size:11px;
    	text-align:center;
    	color:#fff;
    }
    </style>
    Code:
    <div id="nav">
    	<ul id="topnav">
        <li class="lackkonservering"><a href="../lackkonservering.html" title="Ditec&reg; Lackkonservering">Ditec&reg; lackkonservering</a></li>
    	<li class="protec"><a href="../protec.html" title="Protec&reg;">Protec&reg;</a></li>
    	<li class="glastec"><a href="../glastec.html" title="Glastec&reg;">Glastec&reg;</a></li>
    	<li class="falgbehandling"><a href="../falgbehandling.html" title="F&auml;lgbehandling">F&auml;lgbehandling</a></li>
    	<li class="lackskydd"><a href="../lackskydd.html" title="Lackskydd">Lackskydd</a></li>
    	<li class="drheadlamp"><a href="../drheadlamp.html" title="Dr Headlamp">Dr Headlamp</a></li>
       	<li class="tvattservice"><a href="../tvattservice.html" title="Tv&auml;ttservice">Tv&auml;ttservice</a></li>
        <li class="rekonditionering"><a href="../rekonditionering.html" title="Rekonditionering">Rekonditionering</a></li>
        <li class="solfilm"><a href="../solfilm.html" title="Solfilm">Solfilm</a></li>
        <li class="ovriga"><a href="../ovriga.html" title="&Ouml;vriga tj&auml;nster">&Ouml;vriga tj&auml;nster</a></li>
    	</ul>
    	<div class="clearfloat"></div>
        <div id="navtext">
      
        <div class="navlack">Ditec&reg; Lackkonservering</div>
        <div class="navprotec">Protec&reg;</div>
        <div class="navprotec">Glastec&reg;</div>
        <div class="navprotec">F&auml;lgbehandling</div>
        <div class="navprotec">Lackskydd</div>
        <div class="navprotec">Dr Headlamp</div>
        <div class="navprotec">Tv&auml;ttservice</div>
        <div class="navprotec">Rekonditionering</div>
        <div class="navprotec">Solfilm</div>
        <div class="navprotec">&Ouml;vriga tj&auml;nster</div>
    <div class="clearfloat"></div>
      </div>
      </div>

  2. #2
    Join Date
    Mar 2012
    Posts
    1,814
    Not that it solves your problem, but I'd mention that I found your use of the term "sprite" confusing because they are not sprites. At least, not in the modern sense of graphics that have been amalgamated to minimize load time. As far as I can see, they are individual jpeg images.

    I only mention it to avoid others spending time looking for the "sprites", and focus on the issue raised instead!

  3. #3
    Join Date
    Apr 2014
    Posts
    6
    Hey! I have little time so I'll try to direct you to find the right tools in google.
    As I see it I would consider 2 options.

    1. Use of viewports - @media all and (max-width: 786px) { ... }
    Define different screen width's to make a multiline menu (equally distributed and centered menu items) or resize the menu images.

    2. Use of percentages
    Make the images width: 100% (or what ever) and height: auto.


    These ideas might give you the need to add the images directly to the html, because background images are not so good on dynamic resizing with pure html/css... But I can't see any big problems with adding the images to HTML directly.

    If further help is needed then write here.. After work I'll might have time to to a codepen mockup quickly.

    @media is needed anyway, if you want to go mobile, to make a dropdown menu or some other sort of compact UI.

    Hope id gave some ideas/help

  4. #4
    Inga.'s Avatar
    Inga. is offline Motstånd är meningslöst
    Join Date
    Dec 2008
    Location
    Sweden
    Posts
    65
    henrijeret, on the percentages, that was the first method I tried. My problem was that I kept getting the area that's set to 95px height now showing as only a small sliver with the height: auto thing. Obviously, I was not doing it right, but I could not figure out how to use the percentages and have the area height in which the background images were to be presented display properly.

    Thank you very much for the feedback! I should say, we're graphic design orientated and don't work in the technical area often, so the help is very much appreciated.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles