Viewing Custom Menu

Custom Menu



User: Les C. 8 years ago
Can anyone tell me the code used to replicate the menu (expandable three bars in the upper left corner) on this site:

http://bridgeofspies.com/#


Thanks,

LC
User: Roddy 8 years ago
It probably uses CSS transform rotate like I did with the Chameleon Button.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Les C. 8 years ago
--Roddy

OK. Does your widget provide settings for the animated slide-over text and animated line on hover including text size/style, color settings, and hamburger options?


LC

Last edit 8 years ago
User: Les C. 8 years ago
Below is the CSS code for the menu less hamburger—that didn't visually work on the site—and vertical bar animation (which I wasn't able to figure out).

What I would like to find out is how do I limit the height of the hover bar to 14px instead its current 24px without affecting the rest of the menu?

Any and all input is appreciated.


[code]

<style>
nav {
height: 100%;
width: 220px;
}

a {
color: #B3B3B3;
display: block;
font-size: 14px;
font-family: "Arial";
height: 24px;
line-height: 24px;
text-align: left;
text-decoration: none;
transition: all 300ms;
}

a:hover,
li.current a {
box-shadow:
inset 4px 0px 0 #FF0000;
color: #FF0000;
padding: 0 30px;
transition: all 300ms;
}
</style>

[/code]
User: Les C. 8 years ago
One other issue popped up: When I add a hyperlink to a page using EverWeb's inspector, the hyperlink takes on the qualities of the CSS menu.

Any thoughts as to what is happening?


LC
User: Roddy 8 years ago
Quote:
Does your widget provide settings for the animated slide-over text and animated line on hover including text size/style, color settings, and hamburger options?

The Chameleon is just a button for use in combination with the slide out menu widgets.

Quote:
What I would like to find out is how do I limit the height of the hover bar to 14px instead its current 24px without affecting the rest of the menu?


The effect is created by adding an inset box shadow and some padding on hover. An easier way is just to add a "border-left" to the hover state.

The list item <li> and the anchor <a> are separate items. You would create the list item as a block element with a height of 24px and the anchor as a block element with a height of 14px and add the bar to the it - rather than the <li>.


Quote:
the hyperlink takes on the qualities of the CSS menu

You need to be more specific about where you want the styles applied. The way you have them applies that style to any anchor element (link) on the page.

Give you nav an ID or a class name...

<nav id="squigglyNav">
<ul>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3e</a></li>
</ul>
</nav>

Use this in the styles like this...

<style type="text/css">
#squigglyNav {height:100%;width:220px
}
#squigglyNav ul{list styles go here
}
#squigglyNav li{list item styles go here
}
#squigglyNav li a{anchor styles go here
}
#squigglyNav li a:hover{hover styles go here
}
</style>

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Les C. 8 years ago
--Roddy

Thanks for the feedback.

Your detail got the hyperlink issue worked out. ++

What is still troubling is the menu. At present all is working except when I hover over a menu item: the menu item below contracts into it.

Here is my current code:

[code]
<style type="text/css">

#squigglyNav {
height: 100%;
width: 220px;
}

#squigglyNav a {
color: #B3B3B3;
display: block;
font-size: 14px;
font-family: "Arial";
height: 24px;
text-align: left;
text-decoration: none;
transition: all 300ms;
}

#squigglyNav li:hover,
li.current li {
display: block;
height: 24px;
}

#squigglyNav a:hover,
li.current a {
display: block;
height: 12px;
border-left: ;
box-shadow:
inset 3px 0px 0 #FF0000;
color: #FF0000;
padding: 0 30px;
transition: all 300ms;
}
</style>

[/code]


Any additional suggestions would be appreciated.


LC
User: Roddy 8 years ago
Here's a simple example of a vertical nav with the hover effect that you want. Take a look at the styles and you will be able to figure out how it is done.

Note that both the list item and the anchor are block elements but the list item has more top/bottom padding. The border left on hover is applied to the <a> - not the <li>

Also note that the "#vertical-nav ul li a" uses border-box so that the border appears inside the <a> to prevent it jumping sideways on hover. Try it with and without "box-sizing:border-box" to see what I mean. You may like the jumping bean effect!

<style type="text/css">
#vertical-nav{width:120px;height:auto;display:block;margin:0;padding:0}
#vertical-nav ul{margin:0;padding:0;background:#888888;list-style:none;overflow:hidden}
#vertical-nav ul li{width:100%;display:block;background:#000;text-align:left;padding:0;overflow:hidden;padding:10px 10px;margin:1px 0;}
#vertical-nav ul li a {box-sizing:border-box;display:block;background:#000000;text-decoration:none;padding:2px 10px;font:15px Helvetica, sans-serif;color:#FFFFFF;-webkit-transition: 0.2s all;-moz-transition: 0.2s all;transition: 0.2s all}
#vertical-nav ul li a:hover{color:#0593FF;border-left:2px solid #FFFF00;-webkit-transition: 0.2s all;-moz-transition: 0.2s all;transition: 0.2s all}
</style>

<nav id="vertical-nav">
<ul>
<li><a href="">Item [1]</a></li>
<li><a href="">Item [2]</a></li>
<li><a href="">Item [3]</a></li>
</ul>
</nav>

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Les C. 8 years ago
--Roddy

I tried the new nav code and attempted to adapt mine.

Everything is renamed and it functions utterly differently from what I need.

Is it possible the fix the crunching problem in my existing code?


Les

Last edit 8 years ago
User: Roddy 8 years ago
Quote:
Is it possible the fix the crunching problem in my existing code?


Crunching?

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Les C. 8 years ago
--Roddy,

When I hover over a menu item it slides to the right (as it is supposed to), but the other menu items all slide up about 10px 'crunching' into the selected text.

I'm guessing it's an easy fix, but I can't figure it out.

Your ideas?


LC

Last edit 8 years ago
User: Les C. 8 years ago
--Roddy,

Is it possible to have this menu fade in?


Les
User: Roddy 8 years ago
It would be easier if you could email me the CSS and HTML you are using.

I think I already gave you the code to fade in a whole page. Apply the same styles to the <nav> rather than the content div.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
✔ Best Answer  
User: Les C. 8 years ago
--Roddy

Done. Thank you.


LC
User: Les C. 8 years ago
Kudos to Roddy for his assistance and excellence:


HTML Snippet

<nav id="vertical-nav">
<ul>
<li class="fadeIn-1"><a href="">Page 1</a></li>
<li class="fadeIn-2"><a href="">Page 2</a></li>
<li class="fadeIn-3"><a href="">Page 3</a></li>
<li class="fadeIn-4"><a href="">Page 4</a></li>
<li class="fadeIn-5"><a href="">Page 5</a></li>
<li class="fadeIn-6"><a href="">Page 6</a></li>
</ul>
</nav>



Header

<style type="text/css">
#vertical-nav{width:220px;height:100%;display:block;margin:0;padding:0}

#vertical-nav ul{margin:0;padding:0;background:transparent;list-style:none;overflow:hidden}

#vertical-nav ul li{width:100%;display:block;background:transparent;text-align:left;padding:0;overflow:hidden;padding:0;margin:0;border-bottom:4 solid transparent}

#vertical-nav ul li:last-child{border-bottom:0}

#vertical-nav ul li a {position:relative;box-sizing:border-box;display:block;background:transparent;text-decoration:none;padding:4px 0 0 0;font:14px Arial, sans-serif;color:#B3B3B3;background:transparent}

#vertical-nav ul li a:hover{color:#FF0000;padding:4px 0 0 23px}

#vertical-nav ul li a:hover:before{display:block;position:absolute;left:1px;top:7px;content:"";width:3px;height:10px;background:#FF0000};

<style type="text/css">
#vertical-nav{width:220px;height:100%;display:block;margin:0;padding:0}

#vertical-nav ul{margin:0;padding:0;background:transparent;list-style:none;overflow:hidden}

#vertical-nav ul li{width:100%;display:block;background:transparent;text-align:left;padding:0;overflow:hidden;padding:0;margin:0;border-bottom:0px solid #}

#vertical-nav ul li:last-child{border-bottom:0}/* border bottom removed on the last item */

#vertical-nav ul li a {position:relative;box-sizing:border-box;display:block;background:transparent;text-decoration:none;padding:4px 10px;font:14px Arial, sans-serif;color:#B3B3B3;background:transparent}

#vertical-nav ul li a:hover{color:#FF0000; padding: 4px 30PX}

#vertical-nav ul li a:hover:before{display:block;position:absolute;left:10px;top:8px;content:"";width:3px;height:9px;background:#FF0000}

-webkit-transition: {0.3s all;-moz-transition: 0.3s all;transition: 0.3s all}

.fadeIn-1 {
-webkit-animation:fadeIn ease-in 2s;
-moz-animation:fadeIn ease-in 2s;
-o-animation:fadeIn ease-in 2s;
animation:fadeIn ease-in 2s;
}
.fadeIn-2 {
-webkit-animation:fadeIn ease-in 2s;
-moz-animation:fadeIn ease-in 2s;
-o-animation:fadeIn ease-in 2s;
animation:fadeIn ease-in 2s;
}
.fadeIn-3{
-webkit-animation:fadeIn ease-in 2s;
-moz-animation:fadeIn ease-in 2s;
-o-animation:fadeIn ease-in 2s;
animation:fadeIn ease-in 2s;
}
.fadeIn-4{
-webkit-animation:fadeIn ease-in 2s;
-moz-animation:fadeIn ease-in 2s;
-o-animation:fadeIn ease-in 2s;
animation:fadeIn ease-in 2s;
}
.fadeIn-5{
-webkit-animation:fadeIn ease-in 2s;
-moz-animation:fadeIn ease-in 2s;
-o-animation:fadeIn ease-in 2s;
animation:fadeIn ease-in 2s;
}
.fadeIn-6{
-webkit-animation:fadeIn ease-in 2s;
-moz-animation:fadeIn ease-in 2s;
-o-animation:fadeIn ease-in 2s;
animation:fadeIn ease-in 2s;
}
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

</style>


Post Reply
You must login or signup to post.