SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: looking 4 code

  1. #1
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation looking 4 code

    i am looking for a code like at http://www.google.com.au/ig?hl=en&source=iglk at the top of the page where u click more and a drop down box appears.
    Animated Chatrooms - www.121chatrooms.net

  2. #2
    SitePoint Evangelist BJ Duncan's Avatar
    Join Date
    Jun 2007
    Location
    North Richmond
    Posts
    495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Regards,
    BJ Duncan

  3. #3
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No need for any complicated scripts... try this:

    HTML: (listed navigation menu)

    Code HTML4Strict:
    <ul>
     <li><a id="mybutton" href="#">click</a>
      <ul>
       <li><a href="#">item</a></li>
       <li><a href="#">item</a></li>
       <li><a href="#">item</a></li>
       <li><a href="#">item</a></li>
      </ul>
     </li>
     <li><a href="#">Another list item</a></li>
     <li><a href="#">Another list item</a></li>
     <li><a href="#">Another list item</a></li>
    </ul>

    Javascript (put above </body>)

    Code Javascript:
    document.getElementById('mybutton').onclick = function() {
     this.parentNode.getElementsByTagName('UL')[0].style.display = (this.parentNode.getElementsByTagName('UL')[0].style.display=='none') ? 'block' : 'none'; 
    }
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  4. #4
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    like this?

    <ul> <li><a id="mybutton" href="#">click</a> <ul> <li><a href="#">item</a></li> <li><a href="#">item</a></li> <li><a href="#">item</a></li> <li><a href="#">item</a></li> </ul> </li> <li><a href="#">Another list item</a></li> <li><a href="#">Another list item</a></li> <li><a href="#">Another list item</a></li></ul>

    <script type="text/javascript">
    document.getElementById('mybutton').onclick = function() { this.parentNode.getElementsByTagName('UL')[0].style.display = (this.parentNode.getElementsByTagName('UL')[0].style.display=='none') ? 'block' : 'none'; }
    </script>
    Animated Chatrooms - www.121chatrooms.net

  5. #5
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep that should work perfectly.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  6. #6
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it didnt seem to at all just showed links:

    click
    item
    item
    item
    item
    Another list item
    Another list item
    Another list item
    Animated Chatrooms - www.121chatrooms.net

  7. #7
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And what happens if you click on "click"?

    Where abouts in the document did you put the script?
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  8. #8
    SitePoint Guru
    Join Date
    Sep 2007
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok igot it working, but how can i make it overlap content?
    Animated Chatrooms - www.121chatrooms.net

  9. #9
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You'll have to target "ul li ul" within CSS and position it absolutely.

    Try this and you'll see what I mean:

    Code CSS:
    ul li ul {
      background: red;
      color: white;
      padding: 5px;
      position: absolute;
    }
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)


Bookmarks

Posting Permissions

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