Emmet County Footer Slider-Upper

NOTE: All of the sample code used below may be found on the main Emmet County Government site (git: GovernmentEmmet)

JQuery

Place this code in the footer.php scripts section (usually last element within the /body ) There is a sticky-footer.js that would be better used for this, but I haven't gotten to converting it yet.

    $(function(){
        var toggleSitelist = true;
        $('#emmet').on('click',function(e) {
//            var footerPosition = get_footer_position();
            var footerPosition = 'fixed';
            if (footerPosition === 'fixed') {
                if (toggleSitelist) {
                    $("#sitelist").animate({'height': 53}, 600);
                    toggleSitelist = false;
                } else {
                    $("#sitelist").animate({'height': 0}, 600);
                    toggleSitelist = true;
                }
                $('#connect').bind('mouseleave', function () {
                    if (!toggleSitelist) {
                        $("#sitelist").animate({'height': 0}, 600);
                        toggleSitelist = true;
                    }
                });
            }
        })
    });

HTML

Just before the end of <main>, place the following div. You may have to make a new <footer> element around it. Be sure to read the comments within. If this looks weird you may have to place it in a different position; every site is built slightly differently.

                            <div id="connect" class="row show-for-medium-up">
                                <div id="emmet" class="small-12 columns text-center">
                                    <a><img src="<?php echo get_template_directory_uri(); ?>/assets/more_emmet.png"></a>
                                </div>
                                <div id="sitelist" class="small-12 columns text-center">
                                    <ul>
                                        <!-- Links below should be uncommented or added (on every emmet site) as new sites are added -->
                                        <!-- Also be sure to change the href accordingly, and leave it at <?php bloginfo('url');?> for the current site's link -->
                                        <li><a id="current" target="_blank" href="<?php bloginfo('url');?>">Government <br>& Business</a></li>
                                        <li><a target="_blank" href="http://www.midarkskypark.org/">Headlands <br> Dark Sky Park</a></li>
                                        <li><a target="_blank" href="http://www.emmetrecycling.org/">Recycling <br>& Refuse</a></li>
                                        <li><a target="_blank" href="http://www.emmetchxfair.org/">Emmet/Charlevoix <br>County Fair</a></li>
                                        <li><a target="_blank" href="http://www.pellstonairport.com/">Pellston <br>Airport</a></li>
                                        <li><a target="_blank" href="http://www.emmetcountyems.org/">Emmet<br>County EMS</a></li>
                                        <!--<li><a target="_blank" href="#">Essence <br>of Emmet</a></li>-->
                                        <li><a target="_blank" href="http://www.mcgulpinpoint.org/">McGulpin <br>Lighthouse</a></li>
                                        <!--<li><a target="_blank" href="#">Camp <br>Petosega</a></li>-->
                                        <!--<li><a target="_blank" href="#">Veterans <br>Affairs</a></li>-->
                                    </ul>
                                </div>
                            </div>

(S)CSS

Finally, unless you plan on adding the CSS to an existing _footer.scss or _structure.scss, create new .scss file named _explore-emmet.scss, then add the following line to app.scss, below the last @import

@import "explore-emmet";

Contents of _explore-emmet.scss. You may have to change the colors, look at the comments below. You may also have to tweak the margin-bottom of the element immediately preceding it.

#connect {
    position: fixed;
    padding-top: 20px;
    bottom: 0;
    max-width: 1000px;
    z-index: 99;
    #emmet {
        max-width: 300px;
        float: none;
        margin: 0 auto;
        background: #29425c; // this will have to be changed according to site color scheme
        border-radius: 8px 8px 0 0;
        padding: 12px 15px 2px;
    }
    #sitelist {
        height: 0;
        padding: 0;
        ul{
            margin: 0;
            list-style: none;
            background: #29425c; // this will have to be changed according to site color scheme
            li {
                background: none;
                padding: 0 5px;
                display: inline-block;
                & > a {
                    display: block;
                    font-family: Open Sans, sans-serif;
                    font-size: 12px;
                    color: #fff; // this may have to be changed to suit site color scheme
                    padding: 12px 18px;
                    line-height: 1.2;
                }
                a {
                    &#current {
                        background: $light-blue; // this will have to be changed according to site color scheme
                    }
                }
                a:hover {
                    background-color: $light-blue; // this will have to be changed according to site color scheme
                }
            }
        }
    }
}

Disclaimer

Some sites, even within the Emmet family, will have a significantly different footer due to how much time there was between our first Emmet site and the one you're working on now. Until we do a universal update (which isn't the worst idea), you may have to move elements around, or change max-widths, margin, float, display, bottom attributes, and others. There's a good chance that another site will already have run into this problem, so look at the other Emmet sites to see how it has been implemented. McGulpin Point for one was quite different. If you have questions, ask me (Laury).