<ul id="menu">
    <li id="studio" class="menu-content"><a href="{{ path('app_studio') }}">{{ 'NAV_STUDIO'|trans({}, "messages", app.session.get('_locale')) }}</a></li>
    <li id="projects" class="menu-content"><a href="{{ path('app_projects') }}">{{ 'NAV_PROJECTS'|trans({}, "messages", app.session.get('_locale')) }}</a></li>
    <li id="contact" class="menu-content"><a href="{{ path('app_contact') }}">{{ 'NAV_CONTACT'|trans({}, "messages", app.session.get('_locale')) }}</a></li>
</ul>
<ul id="social">
    <li>
        <a href="https://instagram.com/studio_geppetto">
            <img src="{{ asset('bundles/app/images/instagram.png') }}" />
        </a>
    </li>
    <li>
        <a href="https://www.facebook.com/studiogeppetto/?fref=ts">
            <img src="{{ asset('bundles/app/images/facebook.png') }}" />
        </a>
    </li>
    <li>
        <a href="https://twitter.com/studio_geppetto">
            <img src="{{ asset('bundles/app/images/twitter.png') }}" />
        </a>
    </li>
    <li>
        <a href="https://vimeo.com/studiogeppetto">
            <img src="{{ asset('bundles/app/images/vimeo.png') }}" />
        </a>
    </li>
</ul>
<script type="text/javascript" src="{{ asset('jquery/jquery-1.12.4.min.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function() {

        $('.menu-content').hover(function() {
            $(this).stop().animate({
                opacity: 1
            }).siblings().stop().animate({
                opacity: 0.1
            });
        }, function() {
            $(this).siblings().stop().animate({
                opacity: 1
            });
        });

    });
</script>