make svg lines draw in when their container ul is visible

I've created a 'site map' inspired menu which uses svgs to connect each of the items in the menu. At the moment the svg's are static. However I believe it's possible to make these draw in?

I have the added complication that I only want the lines to draw in when their container ul is visible.

These are currently visible when the parent li is hovered over...

   #submenu-1 li:hover>ul {

      visibility: visible;

      opacity: 1;

      max-height: 500px;

      transition: opacity 0.5s ease-in;

    }

Here's a link to the fiddle
https://jsfiddle.net/spittman/sn3xg5Lb/113/show

Any ideas?

Thanks
Sam

asked Nov 19 '18 at 12:02

Sam

add a comment |

I've created a 'site map' inspired menu which uses svgs to connect each of the items in the menu. At the moment the svg's are static. However I believe it's possible to make these draw in?

I have the added complication that I only want the lines to draw in when their container ul is visible.

These are currently visible when the parent li is hovered over...

   #submenu-1 li:hover>ul {

      visibility: visible;

      opacity: 1;

      max-height: 500px;

      transition: opacity 0.5s ease-in;

    }

Here's a link to the fiddle
https://jsfiddle.net/spittman/sn3xg5Lb/113/show

Any ideas?

Thanks
Sam

asked Nov 19 '18 at 12:02

Sam

add a comment |

I've created a 'site map' inspired menu which uses svgs to connect each of the items in the menu. At the moment the svg's are static. However I believe it's possible to make these draw in?

I have the added complication that I only want the lines to draw in when their container ul is visible.

These are currently visible when the parent li is hovered over...

   #submenu-1 li:hover>ul {

      visibility: visible;

      opacity: 1;

      max-height: 500px;

      transition: opacity 0.5s ease-in;

    }

Here's a link to the fiddle
https://jsfiddle.net/spittman/sn3xg5Lb/113/show

Any ideas?

Thanks
Sam

asked Nov 19 '18 at 12:02

Sam

I've created a 'site map' inspired menu which uses svgs to connect each of the items in the menu. At the moment the svg's are static. However I believe it's possible to make these draw in?

I have the added complication that I only want the lines to draw in when their container ul is visible.

These are currently visible when the parent li is hovered over...

   #submenu-1 li:hover>ul {

      visibility: visible;

      opacity: 1;

      max-height: 500px;

      transition: opacity 0.5s ease-in;

    }

Here's a link to the fiddle
https://jsfiddle.net/spittman/sn3xg5Lb/113/show

Any ideas?

Thanks
Sam

html css svg svg-animate

asked Nov 19 '18 at 12:02

Sam

asked Nov 19 '18 at 12:02

Sam

asked Nov 19 '18 at 12:02

Sam

asked Nov 19 '18 at 12:02

Sam

asked Nov 19 '18 at 12:02

Sam

add a comment |

1 Answer
1

active

oldest

votes

Where were you stuck? There are plenty of questions and answers on stack overflow about how to animate line drawing in SVG.

In your case, I recommend that you redraw each of your lines so that they all start at the top and end at their leaf points. At the moment they seem to be split into parts and go in random directions. Some are start to end, and others end to start).

For example:

<svg viewBox="0 0 900 50">

  <polyline points="450,0, 450,25, 112.5,25, 112.5,50" class="st0"/>

  <polyline points="450,0, 450,25, 337.5,25, 337.5,50" class="st0"/>

  <polyline points="450,0, 450,25, 562.5,25, 562.5,50" class="st0"/>

  <polyline points="450,0, 450,25, 787.5,25, 787.5,50" class="st0"/>

</svg>

The line drawing animation is done by setting a stroke-dasharray equal to the length of the line. Then you animate the stroke-dashoffset from that length down to 0. There are many tutorials on the web that explain how that works. I won't repeat the details here.

#submenu-1 li ul svg polyline.st0 {

  stroke-dasharray: 388px;

  stroke-dashoffset: 388px;

}

Then on hover we transition the stroke-dashoffset from 388 to 0.

#submenu-1 li:hover>ul svg polyline.st0 {

  stroke-dashoffset: 0;

  transition: stroke-dashoffset 1s ease-in;

}

You'll need to repeat the above steps for each of the tree SVGs. For the smaller tree graphs the 388px value will need to be reduced.

Complete example:

$('#menu').mouseover(function () {

      $('#page-title').hide();      

});

$('#menu').mouseout(function () {

      $('#page-title').show();      

});

@import url("https://use.typekit.net/tud5kgo.css");



body {

  margin: 0;

  padding: 0;

  border: 0;

  background-color: black;

}



/* Main Menu*/



#submenu-1 {

  list-style: none;

  margin: 0;

  padding: 0px 0 0 0;

}



/* Level 1 – List item  */



#submenu-1 li {

  width: 900px;

  float: left;

  text-align: center;

  padding-top: 10px;

}



#submenu-1 li:hover>ul {

  visibility: visible;

  opacity: 1;

  max-height: 500px;

  transition: opacity 0.5s ease-in;

}



#submenu-1 li ul svg polyline.st0 {

  stroke-dasharray: 388px;

  stroke-dashoffset: 388px;

}



#submenu-1 li:hover>ul svg polyline.st0 {

  stroke-dashoffset: 0;

  transition: stroke-dashoffset 1s ease-in;

}



#submenu-1 ul {

  list-style: none;

  left: 0;

  margin: 0;

  padding: 0;

  position: relative;

  width: 900px;

  float: left;

  visibility: hidden;

  opacity: 0;

  transition: visibility 0s, opacity 0.5s linear;

  max-height: 0;

  transition: max-height 0.5s ease-out;

  z-index: 600;

  padding: 10px 0px 0px 0px;

}





a:link,

a:visited,

a:active {

  color: white;

  text-align: center;

  text-transform: uppercase;

  text-decoration: none;

  font-family: "montserrat";

  font-weight: 800;

  font-size: 25px;

  letter-spacing: 2px;

  line-height: 1;

}



a:hover {

  color: grey;

}



.st0{fill:none;stroke:#FFFFFF;stroke-width:6;stroke-miterlimit:10;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div id="container">

  <div id="menu">



    <ul id="submenu-1">

      <li id="m"><a href="#">what brings<br>you here?</a>



        <ul>

          <svg viewBox="0 0 900 50">

            <polyline points="450,0, 450,25, 112.5,25, 112.5,50" class="st0"/>

            <polyline points="450,0, 450,25, 337.5,25, 337.5,50" class="st0"/>

            <polyline points="450,0, 450,25, 562.5,25, 562.5,50" class="st0"/>

            <polyline points="450,0, 450,25, 787.5,25, 787.5,50" class="st0"/>

          </svg>

    

        </ul>

        

      </li>

    </ul>

  </div>

</div>

edited Nov 19 '18 at 15:06

answered Nov 19 '18 at 14:37

Paul LeBeau

55.2k56593

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53374237%2fmake-svg-lines-draw-in-when-their-container-ul-is-visible%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Where were you stuck? There are plenty of questions and answers on stack overflow about how to animate line drawing in SVG.

For example:

<svg viewBox="0 0 900 50">

  <polyline points="450,0, 450,25, 112.5,25, 112.5,50" class="st0"/>

  <polyline points="450,0, 450,25, 337.5,25, 337.5,50" class="st0"/>

  <polyline points="450,0, 450,25, 562.5,25, 562.5,50" class="st0"/>

  <polyline points="450,0, 450,25, 787.5,25, 787.5,50" class="st0"/>

</svg>

#submenu-1 li ul svg polyline.st0 {

  stroke-dasharray: 388px;

  stroke-dashoffset: 388px;

}

Then on hover we transition the stroke-dashoffset from 388 to 0.

#submenu-1 li:hover>ul svg polyline.st0 {

  stroke-dashoffset: 0;

  transition: stroke-dashoffset 1s ease-in;

}

You'll need to repeat the above steps for each of the tree SVGs. For the smaller tree graphs the 388px value will need to be reduced.

Complete example:

$('#menu').mouseover(function () {

      $('#page-title').hide();      

});

$('#menu').mouseout(function () {

      $('#page-title').show();      

});

@import url("https://use.typekit.net/tud5kgo.css");



body {

  margin: 0;

  padding: 0;

  border: 0;

  background-color: black;

}



/* Main Menu*/



#submenu-1 {

  list-style: none;

  margin: 0;

  padding: 0px 0 0 0;

}



/* Level 1 – List item  */



#submenu-1 li {

  width: 900px;

  float: left;

  text-align: center;

  padding-top: 10px;

}



#submenu-1 li:hover>ul {

  visibility: visible;

  opacity: 1;

  max-height: 500px;

  transition: opacity 0.5s ease-in;

}



#submenu-1 li ul svg polyline.st0 {

  stroke-dasharray: 388px;

  stroke-dashoffset: 388px;

}



#submenu-1 li:hover>ul svg polyline.st0 {

  stroke-dashoffset: 0;

  transition: stroke-dashoffset 1s ease-in;

}



#submenu-1 ul {

  list-style: none;

  left: 0;

  margin: 0;

  padding: 0;

  position: relative;

  width: 900px;

  float: left;

  visibility: hidden;

  opacity: 0;

  transition: visibility 0s, opacity 0.5s linear;

  max-height: 0;

  transition: max-height 0.5s ease-out;

  z-index: 600;

  padding: 10px 0px 0px 0px;

}





a:link,

a:visited,

a:active {

  color: white;

  text-align: center;

  text-transform: uppercase;

  text-decoration: none;

  font-family: "montserrat";

  font-weight: 800;

  font-size: 25px;

  letter-spacing: 2px;

  line-height: 1;

}



a:hover {

  color: grey;

}



.st0{fill:none;stroke:#FFFFFF;stroke-width:6;stroke-miterlimit:10;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div id="container">

  <div id="menu">



    <ul id="submenu-1">

      <li id="m"><a href="#">what brings<br>you here?</a>



        <ul>

          <svg viewBox="0 0 900 50">

            <polyline points="450,0, 450,25, 112.5,25, 112.5,50" class="st0"/>

            <polyline points="450,0, 450,25, 337.5,25, 337.5,50" class="st0"/>

            <polyline points="450,0, 450,25, 562.5,25, 562.5,50" class="st0"/>

            <polyline points="450,0, 450,25, 787.5,25, 787.5,50" class="st0"/>

          </svg>

    

        </ul>

        

      </li>

    </ul>

  </div>

</div>

edited Nov 19 '18 at 15:06

answered Nov 19 '18 at 14:37

Paul LeBeau

55.2k56593

add a comment |

Where were you stuck? There are plenty of questions and answers on stack overflow about how to animate line drawing in SVG.

For example:

<svg viewBox="0 0 900 50">

  <polyline points="450,0, 450,25, 112.5,25, 112.5,50" class="st0"/>

  <polyline points="450,0, 450,25, 337.5,25, 337.5,50" class="st0"/>

  <polyline points="450,0, 450,25, 562.5,25, 562.5,50" class="st0"/>

  <polyline points="450,0, 450,25, 787.5,25, 787.5,50" class="st0"/>

</svg>

#submenu-1 li ul svg polyline.st0 {

  stroke-dasharray: 388px;

  stroke-dashoffset: 388px;

}

Then on hover we transition the stroke-dashoffset from 388 to 0.

#submenu-1 li:hover>ul svg polyline.st0 {

  stroke-dashoffset: 0;

  transition: stroke-dashoffset 1s ease-in;

}

You'll need to repeat the above steps for each of the tree SVGs. For the smaller tree graphs the 388px value will need to be reduced.

Complete example:

$('#menu').mouseover(function () {

      $('#page-title').hide();      

});

$('#menu').mouseout(function () {

      $('#page-title').show();      

});

@import url("https://use.typekit.net/tud5kgo.css");



body {

  margin: 0;

  padding: 0;

  border: 0;

  background-color: black;

}



/* Main Menu*/



#submenu-1 {

  list-style: none;

  margin: 0;

  padding: 0px 0 0 0;

}



/* Level 1 – List item  */



#submenu-1 li {

  width: 900px;

  float: left;

  text-align: center;

  padding-top: 10px;

}



#submenu-1 li:hover>ul {

  visibility: visible;

  opacity: 1;

  max-height: 500px;

  transition: opacity 0.5s ease-in;

}



#submenu-1 li ul svg polyline.st0 {

  stroke-dasharray: 388px;

  stroke-dashoffset: 388px;

}



#submenu-1 li:hover>ul svg polyline.st0 {

  stroke-dashoffset: 0;

  transition: stroke-dashoffset 1s ease-in;

}



#submenu-1 ul {

  list-style: none;

  left: 0;

  margin: 0;

  padding: 0;

  position: relative;

  width: 900px;

  float: left;

  visibility: hidden;

  opacity: 0;

  transition: visibility 0s, opacity 0.5s linear;

  max-height: 0;

  transition: max-height 0.5s ease-out;

  z-index: 600;

  padding: 10px 0px 0px 0px;

}





a:link,

a:visited,

a:active {

  color: white;

  text-align: center;

  text-transform: uppercase;

  text-decoration: none;

  font-family: "montserrat";

  font-weight: 800;

  font-size: 25px;

  letter-spacing: 2px;

  line-height: 1;

}



a:hover {

  color: grey;

}



.st0{fill:none;stroke:#FFFFFF;stroke-width:6;stroke-miterlimit:10;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div id="container">

  <div id="menu">



    <ul id="submenu-1">

      <li id="m"><a href="#">what brings<br>you here?</a>



        <ul>

          <svg viewBox="0 0 900 50">

            <polyline points="450,0, 450,25, 112.5,25, 112.5,50" class="st0"/>

            <polyline points="450,0, 450,25, 337.5,25, 337.5,50" class="st0"/>

            <polyline points="450,0, 450,25, 562.5,25, 562.5,50" class="st0"/>

            <polyline points="450,0, 450,25, 787.5,25, 787.5,50" class="st0"/>

          </svg>

    

        </ul>

        

      </li>

    </ul>

  </div>

</div>

edited Nov 19 '18 at 15:06

answered Nov 19 '18 at 14:37

Paul LeBeau

55.2k56593

add a comment |

Where were you stuck? There are plenty of questions and answers on stack overflow about how to animate line drawing in SVG.

For example:

<svg viewBox="0 0 900 50">

  <polyline points="450,0, 450,25, 112.5,25, 112.5,50" class="st0"/>

  <polyline points="450,0, 450,25, 337.5,25, 337.5,50" class="st0"/>

  <polyline points="450,0, 450,25, 562.5,25, 562.5,50" class="st0"/>

  <polyline points="450,0, 450,25, 787.5,25, 787.5,50" class="st0"/>

</svg>

#submenu-1 li ul svg polyline.st0 {

  stroke-dasharray: 388px;

  stroke-dashoffset: 388px;

}

Then on hover we transition the stroke-dashoffset from 388 to 0.

#submenu-1 li:hover>ul svg polyline.st0 {

  stroke-dashoffset: 0;

  transition: stroke-dashoffset 1s ease-in;

}

You'll need to repeat the above steps for each of the tree SVGs. For the smaller tree graphs the 388px value will need to be reduced.

Complete example:

$('#menu').mouseover(function () {

      $('#page-title').hide();      

});

$('#menu').mouseout(function () {

      $('#page-title').show();      

});

@import url("https://use.typekit.net/tud5kgo.css");



body {

  margin: 0;

  padding: 0;

  border: 0;

  background-color: black;

}



/* Main Menu*/



#submenu-1 {

  list-style: none;

  margin: 0;

  padding: 0px 0 0 0;

}



/* Level 1 – List item  */



#submenu-1 li {

  width: 900px;

  float: left;

  text-align: center;

  padding-top: 10px;

}



#submenu-1 li:hover>ul {

  visibility: visible;

  opacity: 1;

  max-height: 500px;

  transition: opacity 0.5s ease-in;

}



#submenu-1 li ul svg polyline.st0 {

  stroke-dasharray: 388px;

  stroke-dashoffset: 388px;

}



#submenu-1 li:hover>ul svg polyline.st0 {

  stroke-dashoffset: 0;

  transition: stroke-dashoffset 1s ease-in;

}



#submenu-1 ul {

  list-style: none;

  left: 0;

  margin: 0;

  padding: 0;

  position: relative;

  width: 900px;

  float: left;

  visibility: hidden;

  opacity: 0;

  transition: visibility 0s, opacity 0.5s linear;

  max-height: 0;

  transition: max-height 0.5s ease-out;

  z-index: 600;

  padding: 10px 0px 0px 0px;

}





a:link,

a:visited,

a:active {

  color: white;

  text-align: center;

  text-transform: uppercase;

  text-decoration: none;

  font-family: "montserrat";

  font-weight: 800;

  font-size: 25px;

  letter-spacing: 2px;

  line-height: 1;

}



a:hover {

  color: grey;

}



.st0{fill:none;stroke:#FFFFFF;stroke-width:6;stroke-miterlimit:10;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div id="container">

  <div id="menu">



    <ul id="submenu-1">

      <li id="m"><a href="#">what brings<br>you here?</a>



        <ul>

          <svg viewBox="0 0 900 50">

            <polyline points="450,0, 450,25, 112.5,25, 112.5,50" class="st0"/>

            <polyline points="450,0, 450,25, 337.5,25, 337.5,50" class="st0"/>

            <polyline points="450,0, 450,25, 562.5,25, 562.5,50" class="st0"/>

            <polyline points="450,0, 450,25, 787.5,25, 787.5,50" class="st0"/>

          </svg>

    

        </ul>

        

      </li>

    </ul>

  </div>

</div>

edited Nov 19 '18 at 15:06

answered Nov 19 '18 at 14:37

Paul LeBeau

55.2k56593

Where were you stuck? There are plenty of questions and answers on stack overflow about how to animate line drawing in SVG.

For example:

<svg viewBox="0 0 900 50">

  <polyline points="450,0, 450,25, 112.5,25, 112.5,50" class="st0"/>

  <polyline points="450,0, 450,25, 337.5,25, 337.5,50" class="st0"/>

  <polyline points="450,0, 450,25, 562.5,25, 562.5,50" class="st0"/>

  <polyline points="450,0, 450,25, 787.5,25, 787.5,50" class="st0"/>

</svg>

#submenu-1 li ul svg polyline.st0 {

  stroke-dasharray: 388px;

  stroke-dashoffset: 388px;

}

Then on hover we transition the stroke-dashoffset from 388 to 0.

#submenu-1 li:hover>ul svg polyline.st0 {

  stroke-dashoffset: 0;

  transition: stroke-dashoffset 1s ease-in;

}

You'll need to repeat the above steps for each of the tree SVGs. For the smaller tree graphs the 388px value will need to be reduced.

Complete example:

$('#menu').mouseover(function () {

      $('#page-title').hide();      

});

$('#menu').mouseout(function () {

      $('#page-title').show();      

});

@import url("https://use.typekit.net/tud5kgo.css");



body {

  margin: 0;

  padding: 0;

  border: 0;

  background-color: black;

}



/* Main Menu*/



#submenu-1 {

  list-style: none;

  margin: 0;

  padding: 0px 0 0 0;

}



/* Level 1 – List item  */



#submenu-1 li {

  width: 900px;

  float: left;

  text-align: center;

  padding-top: 10px;

}



#submenu-1 li:hover>ul {

  visibility: visible;

  opacity: 1;

  max-height: 500px;

  transition: opacity 0.5s ease-in;

}



#submenu-1 li ul svg polyline.st0 {

  stroke-dasharray: 388px;

  stroke-dashoffset: 388px;

}



#submenu-1 li:hover>ul svg polyline.st0 {

  stroke-dashoffset: 0;

  transition: stroke-dashoffset 1s ease-in;

}



#submenu-1 ul {

  list-style: none;

  left: 0;

  margin: 0;

  padding: 0;

  position: relative;

  width: 900px;

  float: left;

  visibility: hidden;

  opacity: 0;

  transition: visibility 0s, opacity 0.5s linear;

  max-height: 0;

  transition: max-height 0.5s ease-out;

  z-index: 600;

  padding: 10px 0px 0px 0px;

}





a:link,

a:visited,

a:active {

  color: white;

  text-align: center;

  text-transform: uppercase;

  text-decoration: none;

  font-family: "montserrat";

  font-weight: 800;

  font-size: 25px;

  letter-spacing: 2px;

  line-height: 1;

}



a:hover {

  color: grey;

}



.st0{fill:none;stroke:#FFFFFF;stroke-width:6;stroke-miterlimit:10;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div id="container">

  <div id="menu">



    <ul id="submenu-1">

      <li id="m"><a href="#">what brings<br>you here?</a>



        <ul>

          <svg viewBox="0 0 900 50">

            <polyline points="450,0, 450,25, 112.5,25, 112.5,50" class="st0"/>

            <polyline points="450,0, 450,25, 337.5,25, 337.5,50" class="st0"/>

            <polyline points="450,0, 450,25, 562.5,25, 562.5,50" class="st0"/>

            <polyline points="450,0, 450,25, 787.5,25, 787.5,50" class="st0"/>

          </svg>

    

        </ul>

        

      </li>

    </ul>

  </div>

</div>

$('#menu').mouseover(function () {

      $('#page-title').hide();      

});

$('#menu').mouseout(function () {

      $('#page-title').show();      

});

@import url("https://use.typekit.net/tud5kgo.css");



body {

  margin: 0;

  padding: 0;

  border: 0;

  background-color: black;

}



/* Main Menu*/



#submenu-1 {

  list-style: none;

  margin: 0;

  padding: 0px 0 0 0;

}



/* Level 1 – List item  */



#submenu-1 li {

  width: 900px;

  float: left;

  text-align: center;

  padding-top: 10px;

}



#submenu-1 li:hover>ul {

  visibility: visible;

  opacity: 1;

  max-height: 500px;

  transition: opacity 0.5s ease-in;

}



#submenu-1 li ul svg polyline.st0 {

  stroke-dasharray: 388px;

  stroke-dashoffset: 388px;

}



#submenu-1 li:hover>ul svg polyline.st0 {

  stroke-dashoffset: 0;

  transition: stroke-dashoffset 1s ease-in;

}



#submenu-1 ul {

  list-style: none;

  left: 0;

  margin: 0;

  padding: 0;

  position: relative;

  width: 900px;

  float: left;

  visibility: hidden;

  opacity: 0;

  transition: visibility 0s, opacity 0.5s linear;

  max-height: 0;

  transition: max-height 0.5s ease-out;

  z-index: 600;

  padding: 10px 0px 0px 0px;

}





a:link,

a:visited,

a:active {

  color: white;

  text-align: center;

  text-transform: uppercase;

  text-decoration: none;

  font-family: "montserrat";

  font-weight: 800;

  font-size: 25px;

  letter-spacing: 2px;

  line-height: 1;

}



a:hover {

  color: grey;

}



.st0{fill:none;stroke:#FFFFFF;stroke-width:6;stroke-miterlimit:10;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div id="container">

  <div id="menu">



    <ul id="submenu-1">

      <li id="m"><a href="#">what brings<br>you here?</a>



        <ul>

          <svg viewBox="0 0 900 50">

            <polyline points="450,0, 450,25, 112.5,25, 112.5,50" class="st0"/>

            <polyline points="450,0, 450,25, 337.5,25, 337.5,50" class="st0"/>

            <polyline points="450,0, 450,25, 562.5,25, 562.5,50" class="st0"/>

            <polyline points="450,0, 450,25, 787.5,25, 787.5,50" class="st0"/>

          </svg>

    

        </ul>

        

      </li>

    </ul>

  </div>

</div>

$('#menu').mouseover(function () {

      $('#page-title').hide();      

});

$('#menu').mouseout(function () {

      $('#page-title').show();      

});

@import url("https://use.typekit.net/tud5kgo.css");



body {

  margin: 0;

  padding: 0;

  border: 0;

  background-color: black;

}



/* Main Menu*/



#submenu-1 {

  list-style: none;

  margin: 0;

  padding: 0px 0 0 0;

}



/* Level 1 – List item  */



#submenu-1 li {

  width: 900px;

  float: left;

  text-align: center;

  padding-top: 10px;

}



#submenu-1 li:hover>ul {

  visibility: visible;

  opacity: 1;

  max-height: 500px;

  transition: opacity 0.5s ease-in;

}



#submenu-1 li ul svg polyline.st0 {

  stroke-dasharray: 388px;

  stroke-dashoffset: 388px;

}



#submenu-1 li:hover>ul svg polyline.st0 {

  stroke-dashoffset: 0;

  transition: stroke-dashoffset 1s ease-in;

}



#submenu-1 ul {

  list-style: none;

  left: 0;

  margin: 0;

  padding: 0;

  position: relative;

  width: 900px;

  float: left;

  visibility: hidden;

  opacity: 0;

  transition: visibility 0s, opacity 0.5s linear;

  max-height: 0;

  transition: max-height 0.5s ease-out;

  z-index: 600;

  padding: 10px 0px 0px 0px;

}





a:link,

a:visited,

a:active {

  color: white;

  text-align: center;

  text-transform: uppercase;

  text-decoration: none;

  font-family: "montserrat";

  font-weight: 800;

  font-size: 25px;

  letter-spacing: 2px;

  line-height: 1;

}



a:hover {

  color: grey;

}



.st0{fill:none;stroke:#FFFFFF;stroke-width:6;stroke-miterlimit:10;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div id="container">

  <div id="menu">



    <ul id="submenu-1">

      <li id="m"><a href="#">what brings<br>you here?</a>



        <ul>

          <svg viewBox="0 0 900 50">

            <polyline points="450,0, 450,25, 112.5,25, 112.5,50" class="st0"/>

            <polyline points="450,0, 450,25, 337.5,25, 337.5,50" class="st0"/>

            <polyline points="450,0, 450,25, 562.5,25, 562.5,50" class="st0"/>

            <polyline points="450,0, 450,25, 787.5,25, 787.5,50" class="st0"/>

          </svg>

    

        </ul>

        

      </li>

    </ul>

  </div>

</div>

edited Nov 19 '18 at 15:06

answered Nov 19 '18 at 14:37

Paul LeBeau

55.2k56593

edited Nov 19 '18 at 15:06

answered Nov 19 '18 at 14:37

Paul LeBeau

55.2k56593

answered Nov 19 '18 at 14:37

Paul LeBeau

55.2k56593

answered Nov 19 '18 at 14:37

Paul LeBeau

55.2k56593

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Cfrgtkky