dcsimg
www.webdeveloper.com
Results 1 to 13 of 13

Thread: How do I link a dropdown menu link to a single tab (in a multi-tab link menu)?

  1. #1
    Join Date
    Mar 2017
    Posts
    4

    How do I link a dropdown menu link to a single tab (in a multi-tab link menu)?

    hello...

    [not certain how to post the actual code, as I don't know how much of it to use, but...]

    I am working on a website for my local NA Area. On the home page I have begun to create hoverable dropdown menus, the various buttons of which I know how to link to another page on that site...easy enough.

    But that other page contains a multiple tabbed link menu; & what I want to be able to do...is to link individual buttons on that home page drop down menu...to individual tab contents on the other (linked) page.

    As an example...please go to the draft home page on my test server: www.moonjams.net/BurlCoNA-II.htm

    In the header, hover over the "Meetings" link & select SUNDAY.

    Since I've only managed to link the entire page (meetings.htm)...all content is displayed.

    What I want to do is have that SUNDAY button (from that 'Meetings' list on the home page)...open up JUST the SUNDAY content on that linked Meetings page, as though only the SUNDAY tab had been selected...(& at the same time have all the other tabs for the other days be also navigable)

    Can this be done...???

    Certainly would appreciate any insight...thanx in advance,

    dox

  2. #2
    Join Date
    Jan 2017
    Location
    Madison, Wisconsin state
    Posts
    105
    Hi doxology,
    Try this in the "source:http://www.moonjams.net/BurlCoNA-II.htm":
    HTML Code:
    <div class="dropdown-content">
    	<a href="meetings.htm#SUNDAY">SUNDAY</a>
    	<a href="#">MONDAY</a>
    	<a href="#">TUESDAY</a>
    	<a href="#">WEDNESDAY</a>
    	<a href="#">THURSDAY</a>
    	<a href="#">FRIDAY</a>
    	<a href="#">SATURDAY</a>
    </div>
    Here is some appropriate material concerning the "HTML Links - Create a Bookmark".
    Hope this helps you out ...
    - Douglas

  3. #3
    Join Date
    Oct 2013
    Posts
    1,694
    See if this works for you.

    On your meetings page replace the script at the bottom with this:
    Code:
        <script>
        function openCity(evt, cityName) {
            var i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            tablinks = document.getElementsByClassName("tablinks");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active", "");
            }
            document.getElementById(cityName).style.display = "block";
            evt.currentTarget.className += " active";
        }
    	/* Added to "catch" the day from the URL */
    	var day = window.location.search;
    	if (day != '') {
    	    day = day.substring(1);
    	    openCity(event, day);
    	}
        </script>
    Now in your dropdown menu use this:
    HTML Code:
        <div class="dropdown">
          <button class="dropbtn">Meetings</button>
          <div class="dropdown-content">
            <a href="meetings.htm?SUNDAY">SUNDAY</a>
            <a href="meetings.htm?MONDAY">MONDAY</a>
            <a href="meetings.htm?TUESDAY">TUESDAY</a>
            <a href="meetings.htm?WEDNESDAY">WEDNESDAY</a>
            <a href="meetings.htm?THURSDAY">THURSDAY</a>
            <a href="meetings.htm?FRIDAY">FRIDAY</a>
            <a href="meetings.htm?SATURDAY">SATURDAY</a>
          </div>
        </div>
    In dog beers I've only had one.

  4. #4
    Join Date
    Mar 2017
    Posts
    1
    tanks for all
    **Links removed by Site Staff so it doesn't look like you're spamming us. Please don't post them again.**
    Last edited by Train; 03-15-2017 at 04:04 PM.

  5. #5
    Join Date
    Mar 2017
    Posts
    4
    Doug...

    Didn't work...but thanx anyway

    dox

  6. #6
    Join Date
    Mar 2017
    Posts
    4
    Kevin2...

    thanx, man...!!!...worked like a charm. I did notice tho, whichever day opens up on the meetings page...the menu button at the top is not highlighted. (seems like a small point, I know...but)...is there a way to also have the menu button also be highlighted when each day opens up?

    thanx again...(even if that's not possible, you've helped me tremendously...for which I am grateful!)

    dox

  7. #7
    Join Date
    Oct 2013
    Posts
    1,694
    Had a bit of time this morning to play with your page. Dragging your code out of the 20th century and applying a bit of CSS "trickery" takes care of your request to have the active "tab" highlighted. Note that this is a complete replacement for your page code, not an addition or slight edit.
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Burlington County Area of NA - Meeting List</title>
    <style>
    html {background-image: url(SAM_5626-II.jpg);}
    body {
    	position: relative;
    	width: 840px;
    	height: 1000px;
    	margin: 15px auto;
    	padding: 15px;
    	background-color: #FFF;
    	font-family: Georgia, "Times New Roman", Times, serif
    }
    
    header {text-align: center;}
    h1 {font-size: 1.1em;}
    h1 span {color: #0000FF}
    header p {color: #FF0000}
    
    /* Style the tab container */
    #tab {
        display: table;
        width: 99.8%;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
    }
    
    /* Style the "tabs" */
    label {
        background-color: inherit;
        display: table-cell;
        cursor: pointer;
        padding: 14px 16px;
        font: 17px sans-serif;
    }
    
    /* Change background color of tabs on hover */
    label:hover {background-color: #ddd;}
    
    /* Style the tab content */
    section {
        display: none;
        padding: 6px 12px;
        border: 1px solid #ccc;
        border-top: none;
    }
    
    input[name=days] {display: none;}
    
    #SUNDAY:checked ~ #tab label[for=SUNDAY],
    #MONDAY:checked ~ #tab label[for=MONDAY],
    #TUESDAY:checked ~ #tab label[for=TUESDAY],
    #WEDNESDAY:checked ~ #tab label[for=WEDNESDAY],
    #THURSDAY:checked ~ #tab label[for=THURSDAY],
    #FRIDAY:checked ~ #tab label[for=FRIDAY],
    #SATURDAY:checked ~ #tab label[for=SATURDAY]
    	{background-color: #ccc;}
    
    #SUNDAY:checked ~ #sunday,
    #MONDAY:checked ~ #monday,
    #TUESDAY:checked ~ #tuesday,
    #WEDNESDAY:checked ~ #wednesday,
    #THURSDAY:checked ~ #thursday,
    #FRIDAY:checked ~ #friday,
    #SATURDAY:checked ~ #saturday
    	{display: block;}
    
    </style>
    </head>
    <body>
    
        <header>
          <h1><span>BURLINGTON COUNTY AREA</span> of Narcotics Anonymous: <span>MEETING SCHEDULE</span></h1>
          <p>(CLICK HERE for a PDF of the MEETING DIRECTORY)</p>
        </header>
        
        <input type="radio" name="days" id="SUNDAY">
        <input type="radio" name="days" id="MONDAY">
        <input type="radio" name="days" id="TUESDAY">
        <input type="radio" name="days" id="WEDNESDAY">
        <input type="radio" name="days" id="THURSDAY">
        <input type="radio" name="days" id="FRIDAY">
        <input type="radio" name="days" id="SATURDAY">
        
        <div id="tab">
          <label for="SUNDAY">SUNDAY</label>
          <label for="MONDAY">MONDAY</label>
          <label for="TUESDAY">TUESDAY</label>
          <label for="WEDNESDAY">WEDNESDAY</label>
          <label for="THURSDAY">THURSDAY</label>
          <label for="FRIDAY">FRIDAY</label>
          <label for="SATURDAY">SATURDAY</label>
        </div>
    
        <section id="sunday">
          <h3>SUNDAY</h3>
          <p><b>Flat Book</b> (Step Working Guide)<br>
          Virtua Memorial Hospital<br>
          175 Madison Ave, Mt Holly 08060<br>
          11:00am-1:00pm (C/St)</p>
          
          <p><b>No Matter What</b><br>
          449 Club<br>
          6 Pemberton St, Pemberton 08068<br>
          4:00pm-5:30pm (O/S/D/L)</p>
          
          <p><b>Come Grow With Us</b><br>
          St. Mary’s Hall<br>
          145 Broad St, Burlington 08016<br>
          7:00pm-8:30pm (O/S/St./D)</p>
          
          <p><b>Freedom Group</b> (SJ)<br>
          St Peter's Episcopal Church<br>
          1 Hartford Rd, Medford 08055<br>
          8:00pm-9:00pm (O/V)</p>
          
          <p><b>Nothing Else Works</b><br>
          Mount Holly Friends Meeting<br>
          81 High St, Mt Holly 08060<br>
          8:15-9:30pm (C,JFT,D)</p>
        </section>
    
        <section id="monday">
          <h3>MONDAY</h3>
          <p>Content goes here</p>
        </section>
    
        <section id="tuesday">
          <h3>TUESDAY</h3>
          <p>Content goes here</p>
        </section>
    
        <section id="wednesday">
          <h3>WEDNESDAY</h3>
          <p>Content goes here</p>
        </section>
    
        <section id="thursday">
          <h3>THURSDAY</h3>
          <p>Content goes here</p>
        </section>
    
        <section id="friday">
          <h3>FRIDAY</h3>
          <p>Content goes here</p>
        </section>
    
        <section id="saturday">
          <h3>SATURDAY</h3>
          <p>Content goes here</p>
        </section>
    
        <script>
    	var day = window.location.search;
    	if (day != '') {
    	    day = day.substring(1);
    	    document.getElementById(day).checked = true;
    	}
        </script>
    </body>
    </html>
    A couple of other notes:
    1) Although I left it in the code, do your visitors a favor and drop the 1.2 megabyte background image.
    2) This is not by any stretch "mobile friendly" but you now have a fighting chance to make it that way.
    3) Welcome to the 3rd Millenium and HTML5!
    In dog beers I've only had one.

  8. #8
    Join Date
    Oct 2013
    Posts
    1,694
    An oversight -- my bad.

    You can delete position: relative; from the body styles.
    In dog beers I've only had one.

  9. #9
    Join Date
    Jan 2017
    Location
    Madison, Wisconsin state
    Posts
    105
    Thanks dox,
    Always nice to know if a success or fail happens ... (it seemed sensible enough to penetrate the page to specific placement of landing). [i]When Kevin2 came introducing the "?" in the stead of "#" it made me wonder 'what have I missed ...'.
    well all things in due time ... I found a moment and used the search criteria: what is the use of a question mark instead of the pound sign in an html bookmark. I thought this was pretty concise and an excerpt of one returned search listing was:
    An HTML page name might include a bookmark, preceded by a pound sign (#) ... An ASP page name might include a query, by a question mark (?), indicating ...
    I was curious as to the difference...
    ... every and any thing is superfluous until I require it - then it becomes subdued ...
    Thanks again dox and Kevin2
    - Douglas

  10. #10
    Join Date
    Oct 2013
    Posts
    1,694
    @Douglas

    The # vs. ? was a thing I found a couple years ago. This isn't going to be the best explanation in the world but here goes:

    So I had a contact form with several recipients. Said recipients were "selectable" via a ...well... <select>. I wanted to create links to that form with the recipient "pre-selected", rather than just <a href="/contact.htm">Contact the CEO</a> then making the user select CEO from 4-5 choices. Some searching found the solution, adapted in my script above. Unfortunately, in the "heat of battle" I neglected to bookmark the source of that info.

    As to the difference:
    The hash (#) in a URL indicates an ID. So a link to /contact.htm#ceo goes to contact.htm then scrolls to the element with the attribute id="ceo". That doesn't "pre-select" any <option> in a <select> though, which was my above-stated issue. And <a href="#">a link</a> just goes to the top of the page.

    But with <a href="/contact.htm?ceo">Contact the CEO</a> along with some scripting on the contact.htm page <option value="ceo">CEO</option> can be pre-selected. A little thinking outside the box applies the same scripting/URL syntax to the OP's issue.

    https://www.google.com/search?q=java...ocation.search may help...
    Last edited by Kevin2; 03-16-2017 at 04:55 PM. Reason: </a> instead of <a/> and </option> instead of <option>, yikes...
    In dog beers I've only had one.

  11. #11
    Join Date
    Mar 2017
    Posts
    4
    Kevin2...

    Man...thanx so very much for all your help...I am really in awe of the fact that you would effort all this for me...I (& I am certain everyone on our website committee) am very grateful...!!!

    just one more quick question...& I swear, I'll never bother you again. If you go to that page now (http://www.moonjams.net/meetings.htm), I had added a similar page header to the home page, so it didn't look so bland. How can I incorporate that content into your revised code...???

    thanx...dox

    [&btw...I appreciate your concern on the image size...that's just up there now for design viewing...I haven't had a chance yet to optimize it in photoshop]

  12. #12
    Join Date
    Mar 2012
    Posts
    3,961
    Just to clarify the difference between "#" and "?":
    - As has been said, a "#" scrolls the target page up until the text (or image etc...) the ID points to is visible. If the text etc. is already visible, it does nothing.

    - "?" creates a GET variable (just like a form input statement). The variable is passed to the target page, which needs some code to read the variable and act accordingly. The code can be executed server-side (e.g. in PHP) or client-side (in JavaScript).

    Note: Only the first GET variable is marked with a "?". The second and subsequent variables are preceded by an "&". E.g.:

    HTML Code:
    <a href="?var1=val1&var2=val2">text</a>
    The corresponding PHP code would be something like:
    Code:
    <?php if (isset($_GET['var1'])) {
    $var1=$_GET['var1'];
    $var2=$_GET['var2'];
    } else {
    $var1='value1';
    $var2='value2';
    } ?>
    Where "value1" and "value2" are appropriate default values.
    Last edited by jedaisoul; 03-19-2017 at 01:44 PM.

  13. #13
    Join Date
    Oct 2013
    Posts
    1,694
    Apologies for the late reply -- I was out of town and away from all things computer .

    Not extremely happy with this but it works:
    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Burlington County Area of NA - Meeting List</title>
    <style>
        * {
    	margin: 0;
    	padding: 0;
        }
    
        html {background-image: url(SAM_5626-II.jpg);}
    
        body {
    	width: 840px;
    	height: 1000px;
    	margin: 15px auto;
    	background-color: #FFF;
    	font-family: Georgia, "Times New Roman", Times, serif;
        }
    
        header {
    	position: relative;
    	background-color: #ccc;
    	height: 130px;
    	text-align: center;
        }
    
        h1, header p {
    	width: 675px;
    	float: right;
    	white-space: no-wrap;
        }
    
        h1 {
    	font-size: 36px;
    	font-weight: 400;
        }
    
        h1 small {font-size: 24px;}
    
        header p {
    	line-height: 2.5em;
    	color: #0000FF;
        }
    
        header img {
    	position: absolute;
    	left: 3px;
    	top: 3px;
    	width: 194px;
    	height: 150px;
        }
    
        main {
    	border: 1px solid #ccc;
    	width: 95%;
    	margin: 30px auto 0;
        }
    
        main div {
    	display: table;
    	width: 100%;
    	background-color: #f1f1f1;
        }
    
        label {
    	display: table-cell;
    	cursor: pointer;
    	text-align: center;
    	padding: 14px 0;
    	font: 17px sans-serif;
    	border-bottom: 1px solid #ccc;
        }
    
        label:hover {background-color: #ddd;}
    
        section {
    	display: none;
    	margin: 15px;
        }
    
        section p {margin-top: 1em;}
    
        input[name=days] {display: none;}
    
        #SUNDAY:checked ~ main div label[for=SUNDAY],
        #MONDAY:checked ~ main div label[for=MONDAY],
        #TUESDAY:checked ~ main div label[for=TUESDAY],
        #WEDNESDAY:checked ~ main div label[for=WEDNESDAY],
        #THURSDAY:checked ~ main div label[for=THURSDAY],
        #FRIDAY:checked ~ main div label[for=FRIDAY],
        #SATURDAY:checked ~ main div label[for=SATURDAY]
    	{background-color: #ccc;}
    
        #INST:checked ~ main #inst,
        #SUNDAY:checked ~ main #su,
        #MONDAY:checked ~ main #mo,
        #TUESDAY:checked ~ main #tu,
        #WEDNESDAY:checked ~ main #we,
        #THURSDAY:checked ~ main #th,
        #FRIDAY:checked ~ main #fr,
        #SATURDAY:checked ~ main #sa
    	{display: block;}
    </style>
    </head>
    <body>
        <header>
          <h1><small>BURLINGTON COUNTY AREA of Narcotics Anonymous</small><br>
          MEETING SCHEDULE</h1>
          <p>CLICK HERE for a PDF of the MEETING DIRECTORY</p>
          <img src="John-Woolman-House-II.gif" alt="Photo of John Woolman house">
        </header>
        
        <input type="radio" name="days" id="INST" checked>
        <input type="radio" name="days" id="SUNDAY">
        <input type="radio" name="days" id="MONDAY">
        <input type="radio" name="days" id="TUESDAY">
        <input type="radio" name="days" id="WEDNESDAY">
        <input type="radio" name="days" id="THURSDAY">
        <input type="radio" name="days" id="FRIDAY">
        <input type="radio" name="days" id="SATURDAY">
        
        <main>
          <div>
    	<label for="SUNDAY">SUNDAY</label>
    	<label for="MONDAY">MONDAY</label>
    	<label for="TUESDAY">TUESDAY</label>
    	<label for="WEDNESDAY">WEDNESDAY</label>
    	<label for="THURSDAY">THURSDAY</label>
    	<label for="FRIDAY">FRIDAY</label>
    	<label for="SATURDAY">SATURDAY</label>
          </div>
          <section id="inst">
            Click on a day above to see scheduled meetings and places.
          </section>
          <section id="su">
    	<h3>SUNDAY</h3>
            <p><b>Flat Book</b> (Step Working Guide)<br>
            Virtua Memorial Hospital<br>
            175 Madison Ave, Mt Holly 08060<br>
            11:00am-1:00pm (C/St)</p>
          
            <p><b>No Matter What</b><br>
            449 Club<br>
            6 Pemberton St, Pemberton 08068<br>
            4:00pm-5:30pm (O/S/D/L)</p>
          
            <p><b>Come Grow With Us</b><br>
            St. Mary’s Hall<br>
            145 Broad St, Burlington 08016<br>
            7:00pm-8:30pm (O/S/St./D)</p>
          
            <p><b>Freedom Group</b> (SJ)<br>
            St Peter's Episcopal Church<br>
            1 Hartford Rd, Medford 08055<br>
            8:00pm-9:00pm (O/V)</p>
          
            <p><b>Nothing Else Works</b><br>
            Mount Holly Friends Meeting<br>
            81 High St, Mt Holly 08060<br>
            8:15-9:30pm (C,JFT,D)</p>
          </section>
    
          <section id="mo">
            <h3>MONDAY</h3>
            <p>Content goes here</p>
          </section>
    
          <section id="tu">
            <h3>TUESDAY</h3>
            <p>Content goes here</p>
          </section>
    
          <section id="we">
    	<h3>WEDNESDAY</h3>
            <p>Content goes here</p>
          </section>
    
          <section id="th">
            <h3>THURSDAY</h3>
            <p>Content goes here</p>
          </section>
    
          <section id="fr">
            <h3>FRIDAY</h3>
            <p>Content goes here</p>
          </section>
    
          <section id="sa">
            <h3>SATURDAY</h3>
            <p>Content goes here</p>
          </section>
        </main>
    
        <script>
    	var day = window.location.search;
    	if (day != '') {
    	    day = day.substring(1);
    	    document.getElementById(day).checked = true;
    	}
        </script>
    </body>
    </html>
    Again, you really need to optimize the image of the house.

    And finally, thanks to jedaisoul for the far better explanation of the mechanics behind # vs. ? in the URL. I learned my one new thing for the day!
    In dog beers I've only had one.

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