www.webdeveloper.com
Results 1 to 8 of 8

Thread: suckerfish menu ?

Hybrid View

  1. #1
    Join Date
    Sep 2006
    Posts
    375

    suckerfish menu ?

    Hi,


    q1)I can't move the menu to the right without problems as i set a margin on #headlinks2 and the links get cluttered?
    Code:
     #headlinks2 {
    height:25px;
    }
    
    #headlinks2  a {
      color:green;
    
      display: block;
      text-decoration:none;
      width: 100px;
      font-size:13pt;
      padding-right:5px;
      //margin-left:205px;
    }
    
    #headlinks2  a:hover {
      color: white;
      
    
    }
    
    #headlinks2, #headlinks2 ul {
        padding: 0;
    	margin: 0;
    	list-style: none;
    	}
    	
    #headlinks2 li {
    	float: left;
    	width: 100px;
    	}
    	
    #headlinks2 li ul {
    	position: absolute;
    	width: 100px;
    	left: -999em;
    }
    
    #headlinks2 li:hover ul {
    	left: auto;
    
    }
    
    #headlinks2 li:hover ul, #headlinks2 li.sfhover ul {
    	left: auto;
    
    }
    </style>
    <script type="text/javascript">
     sfHover = function() {
    	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" sfhover";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    </script>
    
    //html
    
    <div id="headlinks2">
    
    
    	<li><a href="#">Percoidei</a>
    		<ul>
    			<li><a href="#">Remoras</a></li>
    			<li><a href="#">Tilefishes</a></li>
    			<li><a href="#">Bluefishes</a></li>
    
    		</ul>
    	</li>
    
    	<li><a href="#">Anabant</a>
    		<ul>
    			<li><a href="#">Climbing perches</a></li>
    			<li><a href="#">Labyrinthfishes</a></li>
    			<li><a href="#">mex</a></li>
    
    		</ul>
        </li>
        
         <li><a href="#">Percoidei</a>
    		<ul>
    			<li><a href="#">Remoras</a></li>
    			<li><a href="#">Tilefishes</a></li>
    			<li><a href="#">Bluefishes</a></li>
    
    		</ul>
    	</li>
         <li><a href="#">Anabant</a>
    		<ul>
    			<li><a href="#">Climbing perches</a></li>
    			<li><a href="#">Labyrinthfishes</a></li>
    			<li><a href="#">mex</a></li>
    
    		</ul>
        </li>
    
         <li><a href="#">Percoidei</a>
    		<ul>
    			<li><a href="#">Remoras</a></li>
    			<li><a href="#">Tilefishes</a></li>
    			<li><a href="#">Bluefishes</a></li>
    
    		</ul>
    	</li>
    	<!-- etc. -->
    
    
    
    </div>
    Last edited by jagguy; 03-13-2007 at 01:31 AM.

  2. #2
    Join Date
    Nov 2006
    Location
    Springfield, MO
    Posts
    1,541
    If you can afford it, go get a REAL menu system:

    http://www.projectseven.com/products.../pmm/index.htm
    Ryan Butler

    Ryan Butler.org

  3. #3
    Join Date
    Dec 2004
    Location
    Missouri
    Posts
    200
    Quote Originally Posted by ryanbutler
    If you can afford it, go get a REAL menu system:

    http://www.projectseven.com/products.../pmm/index.htm
    Define real, I quit reading after the words "Requires: Dreamweaver"
    Jon

  4. #4
    Join Date
    Sep 2006
    Posts
    375
    I can't find the answer to this seemingly simple question.

    All I want is to move the flyout menu across about 150px. When adding a margin i get the drop down links moved even further than any margin setting. Even setting a -ve margin doesn't solve it.

  5. #5
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    Try wrapping the whole menu in an extra div and apply the margin required to that. It isn't the ideal solution but sometimes it is the easiest way to move an entire section of your page around.

    Suckerfish is THE REAL menu system because it only requires JScript for IE6 and works entirely with CSS in modern web browsers. RyanButler obviously doesn't understand much about web design if he is looking at any menu system that doesn't work 100% in stylesheets for modern web browsers especially if it requires a special program to be able to even insert it in the first place. Maybe eventually he will graduate to using a REAL / SUCKERFISH menu in place of whatever pretend menu system he is currently using.
    Stephen

  6. #6
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    First of all, get rid of
    Code:
    #headlinks2, #headlinks2 ul {
        padding: 0;
    	margin: 0;
    	list-style: none;
    	}
    - this is over-riding any margins set earlier. Add the list-style to the <li>s as such
    Code:
    #headlinks2 li {
    	float: left;
    	width: 100px;
    	list-style: none;
    }
    and get rid of default browser paddings and margins using
    Code:
    *{
    	margin: 0;
    	padding: 0;
    }
    at the START of your css

    Therefore complete css is
    Code:
    *{
    	margin: 0;
    	padding: 0;
    }
    #headlinks2 {
    	height: 25px;
    	margin-left: 50px;
    }
    #headlinks2  a {
        color:green;
        display: block;
        text-decoration:none;
        width: 100px;
        font-size:13pt;
        padding-right:5px;
    }
    #headlinks2  a:hover {
        color: red;
    }
    #headlinks2 li {
    	float: left;
    	width: 100px;
    	list-style: none;
    }
    #headlinks2 li ul {
    	position: absolute;
    	width: 100px;
    	left: -999em;
    }
    #headlinks2 li:hover ul, #headlinks2 li.sfhover ul {
    	left: auto;
    }
    The div #headlinks2 should also be chaged to <ul> tags - you have a heap of <li>s without a parent <ul>. No div is actually required - you can apply your margins etc to the #headlinks2 <ul>

    Cheers
    Graeme
    Last edited by Centauri; 03-31-2007 at 05:59 AM.

  7. #7
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Also noticed an error in your javascript, probably a result of changing the original id, causing menu not to work in IE6. Change highlighted in red.
    Code:
    <script type="text/javascript">
     sfHover = function() {
    	var sfEls = document.getElementById("headlinks2").getElementsByTagName("LI");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" sfhover";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    </script>
    cheers
    Graeme

  8. #8
    Join Date
    Sep 2006
    Posts
    375
    hi,
    yes i had changed this already 'getElementById("headlinks2")'.

    Thanks for the replies as you guys always come up with the answers. I will read and understand changes you offer.

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