How to use images as secondary navigation?

Community Forums Forums Design Tips and Tricks How to use images as secondary navigation?

This topic is: not resolved

This topic contains 8 replies, has 3 voices, and was last updated by  labecs 1 year, 8 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #9087

    labecs
    Participant
    Post count: 7

    I am trying to use images instead of text on the secondary navigation on my Lifestyle Child theme.  This is what I want it to look like, http://www.outlawbyjazz.com/ but I have no idea of how to code for this. Can someone help me, please? Is it possible?

     

     

    #9199

    marybaum
    Participant
    Post count: 128

    I haven’t used images as navigation in a long time – like, since I learned CSS in 2007. But I would think one way to do it would be to create some plain ol’ html markup for the secondary nav that looks like this:

    <ul>

    <li><a href=”http://yoursite.com/link1.html”><img src=”http://yoursite.com/image1″ title=”title” blah blah=”gobbledygook attributes”/></a></li>

    <li><a href=”http://yoursite.com/link2.html”><img src=”http://yoursite.com/image2″ title=”title” blah blah=”gobbledygook attributes”/></a></li>

    <li><a href=”http://yoursite.com/link3.html”><img src=”http://yoursite.com/image3″ title=”title” blah blah=”gobbledygook attributes”/></a></li>

    </ul>

    Where blah blah=”gobbledygook attributes” are whatever dimensions, alt text and other attributes you want to stick in there. I’ve found that stripping the dimensions out of there makes an image shrink down to the size of its containing div if I need to make the div smaller – as in, when I want to make a column class smaller, or in a responsive design.

    What I’m less sure of is what to do with this markup.

    I can imagine three ways to handle it:

    1. as a hook with the Genesis Simple Hooks plugin;

    2. as a text widget – since we can add html markup in the text-widget box – after creating a php file (subnav.php maybe)that creates a widget area in the nav div:

    <?php

    /**Creates a widget area in the subnav div.

    ?><div id=”subnav” class=”wrap” class=”widget-area”>
    <?php
    genesis_structural_wrap( ‘subnav_wrap’ );
    do_action( ‘genesis_subnav_wrap_widget_area’ );
    genesis_structural_wrap( ‘subnav_wrap’, ‘close’);

    ?>

    </div>

    And registering the widget area in functions.php:

    genesis_register_sidebar( array(
    ‘id’ => ‘subnav’,
    ‘name’ => __( ‘subnav, ‘yourtheme’ ),
    ‘description’ => __( ‘This is your new subnav.’, ‘yourtheme’ ),
    ) );

    Or 3. Copying the subnav chunk of the original menu.php — the action ‘genesis_do_subnav’ to a new file in your theme and naming that new file subnav.php, then editing that to take out almost all the php and leaving just the html markup with the images as links.

    In the end, that might be the simplest thing.

    Mary Baum


    Be it ever so run down, there’s no place like FriendFeed. ;-)

    #9200

    marybaum
    Participant
    Post count: 128

    There is also a CSS-only way to do it if you’re willing to ignore Internet Explorer or go to great lengths to offer workarounds like Modernizr and some others. I’m more interested in learning php at the moment, so I started with the geeky stuff first.That would be to set up your list items as nth-child block elements, give them background images and set the text to indent way outside the borders:li


    Be it ever so run down, there’s no place like FriendFeed. ;-)

    #9201

    marybaum
    Participant
    Post count: 128

    There is also a CSS-only way to do it if you’re willing to ignore Internet Explorer or go to great lengths to offer workarounds like Modernizr and some others. I’m more interested in learning php at the moment, so I started with the geeky stuff first.

    That would be to set up your list items as nth-child block elements, give them background images and set the text to indent way outside the borders:

    li


    Be it ever so run down, there’s no place like FriendFeed. ;-)

    #9203

    marybaum
    Participant
    Post count: 128

    There is also a CSS-only way to do it if you’re willing to ignore Internet Explorer or go to great lengths to offer workarounds like Modernizr and some others. I’m more interested in learning php at the moment, so I started with the geeky stuff first.

    That would be to set up your list items as nth-child block elements, give them background images and set the text to indent way outside the borders:
    ul ul li:nth-child(1) {
    background: url(http://yoursite.com/images/cat.png) top center no-repeat;
    display: inline-block;
    text-indent:-999px;
    }

    ul ul li:nth-child(2) {
    background: url(http://yoursite.com/images/dog.png) top center no-repeat;
    display: inline-block;
    text-indent:-999px;
    }

    ul ul li:nth-child(3) {
    background: url(http://yoursite.com/images/bunny.png) top center no-repeat;
    display: inline-block;
    text-indent:-999px;
    }
    Not that your images are cute, fuzzy animals, but you get the idea. Also, your theme may designate the subnav list items differently, and no doubt you have other properties listed.


    Be it ever so run down, there’s no place like FriendFeed. ;-)

    #9356

    labecs
    Participant
    Post count: 7

    Thank you so much, Marybaum… if you had seen my face when I started reading your answer you would have laughed hysterically… my ignorance of php is gargantuan…. I understood the html code perfectly but after that you started speaking some death tongue  :(

    I sort of like the last “simplest thing” you mentioned, but I have no idea where to start…

    <<Or 3. Copying the subnav chunk of the original menu.php — the action ‘genesis_do_subnav’ to a new file in your theme and naming that new file subnav.php, then editing that to take out almost all the php and leaving just the html markup with the images as links.>>

    Where is the original menu.php and so on? Would you mind explaining that to me in simpler terms, or with step to step instructions, please?

    I’m still not past css and html  :(

    For a simpler option, I also have a special “old western” font that I could use for the Navigation and the footer, and I don’t know if it would be easier to do that.

    I have this code from the original website (I’m actually trying to reproduce it with a different theme)

    <code> @font-face {
    font-family: ‘CarnivaleeFreakshowRegular’;
    src: url(‘fonts/carnevalee_freakshow-webfont.eot’);
    src: url(‘fonts/carnevalee_freakshow-webfont.eot?#iefix’) format(‘embedded-opentype’),
    url(‘fonts/carnevalee_freakshow-webfont.woff’) format(‘woff’),
    url(‘fonts/carnevalee_freakshow-webfont.ttf’) format(‘truetype’),
    url(‘fonts/carnevalee_freakshow-webfont.svg#CarnivaleeFreakshowRegular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    } <code>

    But I have no idea of what file to put it in and where so that it only appears on the subnav and the footer.

    What do you think would be easier, or how can I do both…?

    Thank you in advance…. I will owe you dinner :)

     

    #9362

    buddy_boy8403
    Participant
    Post count: 132

    You can buy and install the UberMenu plugin.  I’ve used it on about 8 sites and it is wonderful!  Allows for some pretty fancy menus – including the ability to easily upload an image into the menu.

    #10423

    labecs
    Participant
    Post count: 7

    Thank you, Buddy!!!!

     

    #10576

    labecs
    Participant
    Post count: 7

    Oh, Buddy… I got the plugin and I love it, but… I don’t like how it looks on my page, so I decided to go with the special font for the navigation and the footer, so can someone help me with that?

    I have this code from the old page

    <code> @font-face {
    font-family: ‘CarnivaleeFreakshowRegular’;
    src: url(‘fonts/carnevalee_freakshow-webfont.eot’);
    src: url(‘fonts/carnevalee_freakshow-webfont.eot?#iefix’) format(‘embedded-opentype’),
    url(‘fonts/carnevalee_freakshow-webfont.woff’) format(‘woff’),
    url(‘fonts/carnevalee_freakshow-webfont.ttf’) format(‘truetype’),
    url(‘fonts/carnevalee_freakshow-webfont.svg#CarnivaleeFreakshowRegular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    } <code>

    But I have no idea of where to place it within my Lifestyle theme :(

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.