Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Rollout text for nav icons

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #167179
    sangars2
    Participant

    Hey all! I have a a website i am currently developing which uses a vertical nav bar. The bar is currently made up of icon images, however it isn’t as informative as I would like. I would like to have text “rollout” to the right of the icon on hover. I have searched online, however cannot seem to find code that works with my own! I have tried using and hover: but seem to have had no luck. If you need any more information please let me know and any help would be very much appreciated!

    Many thanks,
    Sandeep :)

    #167180
    Paulie_D
    Member

    Could you create a Codepen.io example of your nav?

    There are a few ways to do this so before deciding on which way would be most appropriate it would be useful to see your current HTML & CSS.

    #167182
    sangars2
    Participant

    Thanks for the quick reply Paulie_D! I have built a Codepen, however I am pretty amateur – the icons are png files in my directory so cannot be displayed on codepen? Is there a way around this?

    Here it is anyway, and sorry to be a pain!

    http://cdpn.io/msjzi

    screenshot may give you a better idea:
    http://prntscr.com/35q0db

    #167185
    Atelierbram
    Participant

    @sangars2

    the icons are png files in my directory so cannot be displayed on codepen? Is there a way around this?

    You could use an image placeholder service like http://placehold.it

    Anyway I forked your pen showing one way, but there are more ways of doing this.

    #167187
    Paulie_D
    Member

    Here’s another which uses background images and text-indent.

    http://codepen.io/Paulie-D/pen/GtIjd/

    #167249
    sangars2
    Participant

    Cheers for the replies guys!
    I tried both ways but I have had no luck unfortunately. I tried to adapt both to my code and probably messed something up somewhere.


    @Atelierbram
    : http://cdpn.io/pgjiC
    http://prntscr.com/35vjak


    @Paulie_D
    : http://cdpn.io/AuGvr
    http://prntscr.com/35vjzv

    If you need more info, let me know please

    #167256
    sangars2
    Participant

    Hey guys – just got this live so hopefully you will be able to see much clearer!

    http://www.ssangar.com

    #167264
    Atelierbram
    Participant

    @sangars2
    I would like to recommend fixing the errors in the HTML of your site, and make it validate, after that try to consider optimisation.
    I Am not going to analyse your efforts here, maybe someone else will, but instead would like to make you figure this thing out. Good luck.

    #167350
    sangars2
    Participant

    Hi @Atelierbram
    Looked further into it and took your advice into mind and got it partially working! Thanks! Would you mind helping me further to get the animations working if possible? I cannot see where I am going wrong.

    http://www.ssangar.com

    Thanks again

    #167364
    Atelierbram
    Participant

    @sangars2

    You are using an earlier version of the first codepen I made, which only visually hides and reveals the text; no transitioned transforms (= animations ) there.
    To see the compiled auto-prefixed output, click the eye icon in top of the ‘css edit area’ of the codepen.

    
    /* visually hide the navigation text */
    .navtext {
      height: 40px;
      width: 200px;
      margin: 0;
      overflow: visible;
      padding: .5em;
      overflow: hidden;
      position: absolute; 
      display: inline-block;
      -webkit-transform: translateX(-240px);
      -ms-transform: translateX(-240px);
      transform: translateX(-240px);
      -webkit-transition: -webkit-transform 1s;
      transition: transform 1s;
      z-index:-1;
    }   
    /* reveal the navigation text on hover */
    .menu li a:hover .navtext {
      overflow: visible;
      -webkit-transform: translateX(-40px);
      -ms-transform: translateX(-40px);
      transform: translateX(-40px);
    }
    

    For better performance, better go with the second optimised codepen instead though, which uses a single background-image sprite, saving seven http-requests this way. But like I wrote earlier, there is more to benefit of optimisation on this webpage.

Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘CSS’ is closed to new topics and replies.