Menu

Discussion in 'HTML & Website Design' started by jblfan, Sep 2, 2007.

  1. #1
    ok, so after going through 3 pages of search results, and reading all of the topics for "drop down menus", i have come to the conclusion, that maybe im not searching for the right term.

    So, if i can get some help. what i would like to do, is place a drop down menu at the top of my page. I currently have the menu in place, but apparently im not using the right code to target a section of my page. I tried using the <a =href"#top> tag but im guessing that doesnt work for what im trying to do, or im not typing it right. so, because i cant give you the link of my website due to me not having enough posts, im hoping that i can place the code im using in here and maybe i could get some help.

    here it goes...heres the menu that im using, very simple, very genaric.


    <select class="smallselect" id="week1" style="width:150px;" onChange="jumpLinks('parent',this,0)">
    <option value="-1">Select week...</option>
    <option value="1">Week 1</option>
    <option value="2">Week 2</option>
    <option value="3">Week 3</option>
    <option value="4">Week 4</option>
    <option value="5">Week 5</option>
    <option value="6">Week 6</option>
    <option value="7">Week 7</option>
    <option value="8">Week 8</option>
    <option value="9">Week 9</option>
    <option value="10">Week 10</option>
    <option value="11"><a href="#Week11">Week 11</a></option>
    <option value="12">Week 12</option>
    <option value="13">Week 13</option>
    <option value="14">Week 14</option>
    <option value="15">Week 15</option>
    <option value="16">Week 16</option>
    <option value="17">Week 17</option>
    </select>



    Now, as you can see, I tried to use option 11 as my test link. i want the menu to jump to a section of my page when its selected.

    heres the code im using for the location i want the page to jump to when they select week 11

    <a name="Week11"></a>

    Now, maybe this only works one way, im hoping not, as ive seen it on other sites where this works.

    Thanks in advance for your help.
     
    jblfan, Sep 2, 2007 IP
  2. jblfan

    jblfan Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I also want to point out that my page is getting up there in size. its up to 240k. theres alot on this page. Im gonna try and use css eventually, when i get this set up right.
     
    jblfan, Sep 2, 2007 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hmmm... you have a part of your page (in a div or something) with the id of Week 11?

    I dunno what all there is on your page, but is there a particular reason you're using the option tags? Could you also use ordinary lists?

    
    
    <ul style="width:150px;"> (tho I'd rather the style was set in CSS)
          <li>Select Week...          (notice no </li>... that comes later)
                <ul>  
                      <li><a href="#week1">Week 1</a></li>
                      <li><a href="#week2">Week 2</a></li>
                      <li><a href="#week3">Week 3</a></li>
                      <li><a href="#week4">Week 4</a></li>
                      <li><a href="#week5">Week 5</a></li>
                      <li><a href="#week6">Week 6</a></li>
                      <li><a href="#week7">Week 7</a></li>
                      <li><a href="#week8">Week 8</a></li>
                      <li><a href="#week9">Week 9</a></li>
                      <li><a href="#week10">Week 10</a></li>
                      <li><a href="#week11">Week 11</a></li>
                      <li><a href="#week12">Week 12</a></li>
                      <li><a href="#week13">Week 13</a></li>
                      <li><a href="#week14">Week 14</a></li>
                      <li><a href="#week15">Week 15</a></li>
                      <li><a href="#week16">Week 16</a></li>
                      <li><a href="#week17">Week 17</a></li>
                    </ul>
             </li>
      </ul>
    
    Code (markup):
    Later in your page you have:
    
    <div id="week1">
    <p>whatever text is for week 1</p>
    </div>
    blah
    <div id="week2">
    <p>whatever text is for week 2</p>
    </div>
    blah 
    etc
    
    Code (markup):
    I'm assuming the Weeks are all on the same page as the select options you have and that the Weeks are not on other pages for instance. In which case, you'd have the names of the pages after the a href.


    If your page is huge, CSS won't make it smaller... it's better (easier) to have clean, simple html first and then style it with CSS. You may just have a huge page, but likely it's extra code cluttering up the place. You can't post clickie links until 10 posts, but you can type the name without the www like
    google.com
    and people can copy and paste that into their browsers and take a look at your page : )
     
    Stomme poes, Sep 3, 2007 IP
  4. jblfan

    jblfan Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    ok, heres the link

    sportschatbox.com/nflschedule.htm

    and ill see if i can figure out what you just said!! lol!!
     
    jblfan, Sep 3, 2007 IP
  5. AstarothSolutions

    AstarothSolutions Peon

    Messages:
    2,680
    Likes Received:
    77
    Best Answers:
    0
    Trophy Points:
    0
    #5
    What you want is a jump to menu then - someone selects from a drop down list and then moves to that page/ section?

    If this is the case then you need to add javascript to make it work and a reasonable example of this is below

    http://javascript.internet.com/navigation/jump-menu.html
     
    AstarothSolutions, Sep 3, 2007 IP
  6. jblfan

    jblfan Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    the instructions given in that link say to jump to another url. i need it to jump to a section of my page.

    ok, so heres what i have...

    Section 1                              (dropdown menu here)
                                 
                   Content
                   Content
                   Content
    
    
    
    
    Section 2
                   Content
                   Content
                   Content
    
    
    
    
    Section 3
                   Content
                   Content
                   Content
    Code (markup):
    So, basically, when user choses Section 3, it will scroll down the page to that pages content for section 3, section 2, etc.
     
    jblfan, Sep 3, 2007 IP
  7. VimF

    VimF Well-Known Member

    Messages:
    307
    Likes Received:
    27
    Best Answers:
    0
    Trophy Points:
    118
    #7
    Here's my suggestion:

    For the html
    
    <ul id="dr">
    	<li><span onclick="tg();">Select Week...</span>
    		<ul id="drd" style="display:none;" onclick="tg();">
    			<li><a href="#week1">Week 1</a></li>
    			<li><a href="#week2">Week 2</a></li>
    			<li><a href="#week3">Week 3</a></li>
    			<li><a href="#week4">Week 4</a></li>
    			<li><a href="#week5">Week 5</a></li>
    			<li><a href="#week6">Week 6</a></li>
    			<li><a href="#week7">Week 7</a></li>
    			<li><a href="#week8">Week 8</a></li>
    			<li><a href="#week9">Week 9</a></li>
    			<li><a href="#week10">Week 10</a></li>
    			<li><a href="#week11">Week 11</a></li>
    			<li><a href="#week12">Week 12</a></li>
    			<li><a href="#week13">Week 13</a></li>
    			<li><a href="#week14">Week 14</a></li>
    			<li><a href="#week15">Week 15</a></li>
    			<li><a href="#week16">Week 16</a></li>
    			<li><a href="#week17">Week 17</a></li>
    		</ul>
    	</li>
    </ul>
    Code (markup):
    CSS
    
    ul {
    	list-style: none outside;
    	font-family: arial, helvetica, sans-serif;
    	margin: 0;
    	padding: 0;
    }
    #dr {
    	position: relative;
    }
    #drd {
    	border: 1px solid #555;
    	padding: 3px 6px;
    	position: absolute;
    	top: 20px;
    	left: 0;
    	background: #fff;
    }
    #drd a {
    	text-decoration: none;
    	font-size: 13px;
    }
    
    Code (markup):
    And JS
    
    function tg() {
    	var oM = document.getElementById("drd");
    	oM.style.display = oM.style.display == "none"?"block":"none";
    }
    
    Code (markup):
     
    VimF, Sep 3, 2007 IP
  8. AstarothSolutions

    AstarothSolutions Peon

    Messages:
    2,680
    Likes Received:
    77
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Just replace page with anchor so the link will be #anchorname rather than the new page name
     
    AstarothSolutions, Sep 3, 2007 IP
  9. jblfan

    jblfan Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    that worked great. took me a while to figure out where the js function went, but i finally figured it out. Thanks for the help guys....much appreciated!!!
     
    jblfan, Sep 3, 2007 IP