Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Horizontal image menu above main nav

    Hi good day to all. Thank you for your time and attention.

    On My Website | Just another WordPress site

    I am trying to make a horizontal menu nav of three images above the main nav of the site. this is WP site so I am hardcoding the image menu but up til now all i have been able to do was display them. I tried to copy the CSS and html structure of the main nav but it hasnt' gotten me anywhere. Here is the html/css

    Code:
    echo "  <nav class = 'three-images'>
    							<div class = 'three-image-menu three-nav-wrap'>
    							<ul id = 'three-image-menu' class = 'menu three-nav'>
    								<li><img src = 'http://siti.ballroomdancepa.com/wp-content/uploads/2014/05/bca-300x300.png'/></li>
    							    <li><img src = 'http://siti.ballroomdancepa.com/wp-content/uploads/2014/05/kjgndv-300x300.png'/></li>
    								<li><img src = 'http://siti.ballroomdancepa.com/wp-content/uploads/2014/05/bac-300x300.png'/></li>
    								</ul>
    							</div>
    							
    						</nav>
    Code:
    .three-images{clear:none;display: inline; position: absolute; z-index: 101; line-height:30px; height:100%; margin:0; right:0;}
    .three-nav-wrap{float:left;}
    .three-nav-wrap ul{ margin:0; padding: 0; }
    .three-nav ul img{ display: none; margin-left:0; left:0; position: absolute; top: 100%; width: 208px; z-index: 2; padding:0; box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); margin-top:-1px; }
    
    .three-nav ul li { margin:0; padding:0; width:100%; }
    .three-nav ul li a { border-right-style: solid; border-right-width:1px; border-left-style: solid; border-left-width:1px; }
    .three-nav ul ul li:last-child > a { border-right-style: solid; border-right-width:1px; border-left-style: solid; border-left-width:1px; }
    .three-nav li { float:left; position:relative; z-index:20; }
    
    .three-nav li:hover{ z-index: 101}
    .three-nav > li > ul { border-top-width:2px; border-top-style: solid; }
    .three-nav > li { line-height: 30px; }
    .three-nav li a { max-width:none; /* fixes IE8 menu width issue*/ }
    .three-nav > li > a 
    {
    display:block;
    text-decoration: none;
    padding:0 13px;
    font-weight: normal;
    font-size:12px;
    font-weight: 600;
    font-size: 13px;
    -webkit-transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
    -moz-transition: 	background-color 0.4s ease-in-out, color 0.4s ease-in-out;
    transition: 		background-color 0.4s ease-in-out, color 0.4s ease-in-out;
    }

  • #2
    New Coder
    Join Date
    Feb 2014
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Looks like you could assign an anchor and target to the image links, here is a resource that might be helpful: HTML Links and here: Tryit Editor v1.9


  •  

    Posting Permissions

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