Menu modifications with plugins or css?

Hey there,

I'm currently doing a project witch requires sum of the advanced techingues and would gladly appreciate little bit of advices.

First of all the site i'm working is http://kirja.innovitale.com/

I would like to get the main menu on the right side to repeat certain image (Booklike pattern).

Secondly i would need certain image to appear on the menu area. (It's like a line)

Thirdly i would need the hover over effect to trigger another little image. Also! There should be 1 image that always stays on top of the menu and another one that stays on the bottom. "For the purpose for adding menu items later and it wouldn't break"

Any help with this would be gladly appreaciated. :slight_smile:

  • Mark Wallace

    Hi!

    I am not sure i follow, but you can use custom menu links and in the place you would put the menu title, you can insert html.

    I played around with it before trying to make it look like a snake was slithering down the page, but couldn't get the images to line up, and it dint slither, it just was there or not there, but i think you could do the same!

    Just create the image you want to use upload it to database then copy the HTML and past it in the custom link title.

    If you have a hard time finding the HTML just save the image to a page and click the HTML editor then copy that and place it in the custom menu link.

    Enjoy!

  • Niko

    Thanks for your thoughts Hi And.Hello!

    This would seem a way to go forward to it but it doesn't make the hover over effect and cus this is for a client, bringing up html everytime you add a menu would be like Grim Reaper showing up so i would possibly need a css or plugin solution.

    This is the image i'm gonna use on those menu parts. I know those would be needed to chop to 4 diffrent pieces all together for the expanding and hovering to work fully.

  • Mark Wallace

    Hi!

    i am not sure how you can use images in a menu without html.
    Try http://cooltext.com

    It will help you create button with effects, and give you the code that goes with it! So just make a sample button and see if it works for you!

    also even with css, you will still need to define a class and place html in it, i just do not see a way around that!

    If you do find an easier way, please do share it!
    Thanks!
    Be Blessed!

  • Niko

    Hey guys and thanks already!

    Patrick your post seems to be excatly going to the right direction. In the post you have desribed that all the menus have to had id:s designated thou. Is there a solution to order like first menu item --> This picture.. All between repeat --> This picture.. And the last menu --> This picture..

    As the hover effect it would always be the same but under the text so it would give a nice effect.

    Thanks already :slight_smile:

  • Niko

    Hey Patrick,

    Thnx for the help i followed your tutorials and tried to get them to work together.As of now i'm trying to get the Hover effect to work like it should.

    Sumhow there is this white color & text coming when hovered. Also i would like to get the crossbar to show when link is active but can't seem to find the right combination.

    Here is my gustom CSS:

    #top-menu .risti1 a {
    	background: url('http://kirja.innovitale.com/files/2013/01/syntimittari-risti1.png') no-repeat 0 0;
    	color: transparent;
    }
    
    #top-menu .risti2 a {
    	background: url('http://kirja.innovitale.com/files/2013/01/risti-toistuva.png') no-repeat 0 0;
    	color: transparent;
    }
    
    #top-menu .risti3 a {
    	background: url('http://kirja.innovitale.com/files/2013/01/bg-100.png') no-repeat 0 0;
    	color: transparent;
    }
    
    #top-menu .risti4 a {
    	background: url('http://kirja.innovitale.com/files/2013/01/bg90-99.png') no-repeat 0 0;
    	color: transparent;
    }
    
    #top-menu .risti2 a:hover, #top-menu .risti2 a:focus {
    	background: url('http://kirja.innovitale.com/files/2013/01/keskipalkki.png');
    	color: transparent;
    }
  • aecnu

    Greetings Niki,

    Just checking if this issue was eventually resolved in another thread? Or by yourself separately to us? Or by us over email with you? Or using our live support?

    If so, no need to reply, that's great news.

    If not, or you have any more questions related to this thread, please feel free to post them below including any new symptoms or errors and tick the 'Mark as Not Resolved (re-open)' box below the post area (or else we'll miss it!)

    Otherwise, happy days, glad you got it sorted :slight_smile:

    Thank you for being a WPMU DEV Community Member!

    Cheers, Joe

  • Niko

    Greetings Joe,

    After lots of testing, reading, crying.. Okay there was none crying going on but i got it sorted out rather simplish way. After thinking about it i only needed 1 image to appear on assigned menus then 1 hover effect with it to appear nicely.

    For the ease of the menu update i created 2 options for menus:

    .red a {
    	color: #8F0507;
    }
    
    .white a {
    	color: #970009;
    	font-family: 'Risque', cursive;
    	font-size: 17px;

    Here is the code as a result.. Maybe this will help sumone else also!

    #top-menu a:hover .link_text, .current-menu-item > a, #top-menu .current-menu-item > a:hover, #top-menu .current-menu-item > a:hover .link_bg, .et_active_dropdown > li a, #top-menu .et_clicked, #mobile-nav {
    	color: #8F0507;
    }
    #top-menu .risti-solu a, #top-menu .risti-solu a:hover, #top-menu .risti-solu a:focus {
    	background-repeat: no-repeat;
    	color: #8F0507;
    }
    
    #top-menu .risti-solu a, #top-menu .risti-solu a:hover, #top-menu .risti-solu a:focus {
    	background-image: url('http://syntimittari.kotisivuton.com/files/2013/01/risti-perus.png');
    }
    
    #top-menu .risti-solu a, #top-menu .risti-solu a:hover, #top-menu .risti-solu a:focus {
    	color: #FD9400;
    }
    
    #top-menu .risti-solu a:focus {
    	color: #FD9400;
    }
    
    .single #main a, .page #main a {
    	color: #8F0507!important;
    }

    Thanks for @Patrick and @And.Hello for the help also! :slight_smile:

    You can check the end result at: http://syntimittari.fi/

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.