Please decode this code please

brandofamily · August 24, 2013

the red menu line on this page is donated code from a fellow SM'er...
http://www.brandolinoimaging.com/Info-Pages/Test-2/n-zvWvH

The CSS for the code is what I'm trying to figure out... it's below...
What part is making the drops seem to fly in from below or right?

#menu-primary {
  background-color: #bd4c33;
  background-image: -webkit-gradient(left top, left bottom, from(#bd4c33), to(#8C3926));
  background-image: -webkit-linear-gradient(top, #bd4c33, #8C3926);
  background-image: -moz-linear-gradient(top, #bd4c33, #8C3926);
  background-image: -ms-linear-gradient(top, #bd4c33, #8C3926);
  background-image: -o-linear-gradient(top, #bd4c33, #8C3926);
  background-image: linear-gradient(top, #bd4c33, #8C3926);
  -pie-background: linear-gradient(top, #bd4c33, #8C3926);
  box-shadow: 0px 3px 5px #000;
  -moz-box-shadow: 0px 3px 5px #000;
  -webkit-box-shadow: 0px 3px 5px #000;
}

#menu-primary ul {
  list-style: none;
  margin: 0;
  text-align: center;
}

#menu-primary .menu-items {
  zoom: 1;
}

#menu-primary .menu-items::before, #menu-primary .menu-items::after {
  content: "";
  display: table;
}

#menu-primary .menu-items::after {
  clear: both;
}

#menu-primary .menu-items > ul {
  width: 100%;
  margin: 60px auto;
}

#menu-primary ul ul {
  margin: 20px 0 0;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 43px;
  z-index: 1;
  text-align: left;
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-in-out;
}

#menu-primary li:hover > ul {
  opacity: 1;
  visibility: visible;
  margin: 0;
  -webkit-transition: all 0.35s ease-in;
  -moz-transition: all 0.35s ease-in;
  -o-transition: all 0.35s ease-in;
  transition: all 0.35s ease-in-out;
}

#menu-primary ul ul ul {
  top: 0;
  left: 230px;
  margin: 0 0 0 20px;
}

#menu-primary li {
  display: inline-block;
  position: relative;
}

#menu-primary li a {
  display: inline-block;
  padding: 12px 25px;
  color: #d9984a;
  font-family: Muli, sans-serif;
  text-decoration: none;
}

#menu-primary li a:hover, #menu-primary li:hover > a, #menu-primary li.current-menu-item > a, .sm-page-node-ZWr8F #menu-primary li.about-me a, .sm-page-node-6f35D #menu-primary li.portfolio a {
  color: #dfd0bb;
}

#menu-primary li li.current-menu-item > a {
  color: #d9984a;
}

#menu-primary li li a {
  font-size: .6875rem;
  text-transform: uppercase;
  color: #d9984a;
  opacity: 0.98;
}

#menu-primary li li a:hover, #menu-primary li li:hover > a {
  color: #dfd0bb;
  background: #8C3926;
}

#menu-primary ul ul {
  background-color: #332223;
  background-image: -webkit-gradient(left top, left bottom, from(#482F31), to(#332223));
  background-image: -webkit-linear-gradient(top, #482F31, #332223);
  background-image: -moz-linear-gradienttop, (#482F31, #332223);
  background-image: -ms-linear-gradient(top, #482F31, #332223);
  background-image: -o-linear-gradient(top, #482F31, #332223);
  background-image: linear-gradient(top, #482F31, #332223);
  -pie-background: linear-gradient(top, #482F31, #332223);
  border: 1px solid #39321f;
  box-shadow: 0px 3px 5px #000;
  -moz-box-shadow: 0px 3px 5px #000;
  -webkit-box-shadow: 0px 3px 5px #000;
}

#menu-primary ul ul li {
  float: none;
  display: block;
}

#menu-primary ul ul li a {
  width: 180px;
  display: block;
  float: none;
}

#menu-primary-items ul li:first-child > a::after {
  content: '';
  position: absolute;
  left: 25px;
  top: -6px;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #332223;
  border-left: 6px solid transparent;
}

#menu-primary-items ul ul li:first-child a::after {
  left: -6px;
  top: 50%;
  margin-top: -6px;
  border-top: 6px solid transparent;
  border-right: 6px solid #332223;
  border-bottom: 6px solid transparent;
  border-left: 0;
}

.sf-sub-indicator {
  display: none;
}

brandofamily · August 24, 2013

OK, I think the transition parts of this code is what allows the fly in effect...
How do I incorporate it into the drop down SM nav bar?

I know I could build my own... I was the 1st, or one of the 1st, on legacy to do it, but I don't want to go down that road again.... older and smarter:D

You can use this page to try to make the effect work on the top nav bar...
http://www.brandolinoimaging.com/Info-Pages/Test-2/n-zvWvH

#menu-primary ul ul {
  margin: 20px 0 0;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 43px;
  z-index: 1;
  text-align: left;
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-in-out;
}

#menu-primary li:hover > ul {
  opacity: 1;
  visibility: visible;
  margin: 0;
  -webkit-transition: all 0.35s ease-in;
  -moz-transition: all 0.35s ease-in;
  -o-transition: all 0.35s ease-in;
  transition: all 0.35s ease-in-out;
}

Andy · August 24, 2013

at your 404 page!!!!!!!!!

brandofamily · August 24, 2013

Andy wrote: »

at your 404 page!!!!!!!!!

I found that beauty back on '08 while on Lake Como in Italy. She was tooooooo HOT!
Glad you liked it! I thought it made the point well:D

brandofamily · August 24, 2013

Andy wrote: »

at your 404 page!!!!!!!!!

Fixed the link ...

http://www.brandolinoimaging.com/404
So the rest of you can look too...

thenickdude · August 25, 2013

Try:

.sm-user-ui .yui3-menu {
    -moz-transition: top 0.20s ease-out, left 0.20s ease-out;
    -o-transition: top 0.20s ease-out, left 0.20s ease-out;
    -webkit-transition: top 0.20s ease-out, left 0.20s ease-out;
    transition: top 0.20s ease-out, left 0.20s ease-out;
    left:-100px;
    top:0;
}

brandofamily · August 25, 2013

Lamah wrote: »

Try:

.sm-user-ui .yui3-menu {
    -moz-transition: top 0.20s ease-out, left 0.20s ease-out;
    -o-transition: top 0.20s ease-out, left 0.20s ease-out;
    -webkit-transition: top 0.20s ease-out, left 0.20s ease-out;
    transition: top 0.20s ease-out, left 0.20s ease-out;
    left:-100px;
    top:0;
}

Closer... 1st level drop flies in from the left... original floats in from below for 1st level and 2nd level floats in from right.

thenickdude · August 25, 2013

Is that what you want to happen, or what is currently happening?

brandofamily · August 25, 2013

Lamah wrote: »

Is that what you want to happen, or what is currently happening?

What I was looking to do ( on my main nav bar) was the actions on that red nav bar...
1st level drops to float in from below and next level to float in from right.

Currently (using your code snippet) 1st level flys in from right like lightning and 2nd level appears as in the past.

example of my current nav on top... the red bar nav below is what I wish to achieve:
http://www.brandolinoimaging.com/Info-Pages/Test-2/n-zvWvH

thenickdude · August 25, 2013

That gallery just shows a 404 page, make sure it isn't set to Private (set it to Unlisted instead) and grab the link for it again.

Hikin' Mike · August 25, 2013

brandofamily wrote: »

What I was looking to do ( on my main nav bar) was the actions on that red nav bar...
1st level drops to float in from below and next level to float in from right.

Currently (using your code snippet) 1st level flys in from right like lightning and 2nd level appears as in the past.

example of my current nav on top... the red bar nav below is what I wish to achieve:
http://www.brandolinoimaging.com/Unlisted-Picture-Galleries/Other/Test-2

Your link shows your '404'.

brandofamily · August 25, 2013

Lamah wrote: »

That gallery just shows a 404 page, make sure it isn't set to Private (set it to Unlisted instead) and grab the link for it again.

Sorry:

http://www.brandolinoimaging.com/Info-Pages/Test-2/n-zvWvH

Hikin' Mike · August 25, 2013

It looks like it's working as it should. My site works like that too.

brandofamily · August 25, 2013

Hikin' Mike wrote: »

It looks like it's working as it should. My site works like that too.

Yours works fine... I just copied your html and css... mine works as SM designed. But I want mine to work like yours but by converting the SM code.

Hikin' Mike · August 25, 2013

brandofamily wrote: »

Yours works fine... I just copied your html and css... mine works as SM designed. But I want mine to work like yours but by converting the SM code.

I still think you'd be better off going the custom nav route like I did.

brandofamily · August 25, 2013

Hikin' Mike wrote: »

I still think you'd be better off going the custom nav route like I did.

Noted

brandofamily · August 27, 2013

This ones dead in the water I guess... I have googled around for quite some time and am stumped as to how Mike's code does what it does.

thenickdude · August 27, 2013

I gave it a go, but because the submenus are absolutely positioned using JavaScript to set styles directly on the elements, it's really hard to make them fly in from the right location.

brandofamily · August 27, 2013

Lamah wrote: »

I gave it a go, but because the submenus are absolutely positioned using JavaScript to set styles directly on the elements, it's really hard to make them fly in from the right location.

Thanks for trying.

brandofamily · September 2, 2013

Lamah wrote: »

I gave it a go, but because the submenus are absolutely positioned using JavaScript to set styles directly on the elements, it's really hard to make them fly in from the right location.

Any chance you can code the menu to open smoother? Like the smooth color transitions?
Thanks.

thenickdude · September 2, 2013

The reason the movement is so quick is that SmugMug's JavaScript is controlling the source position of the menus, and as far as I can figure, this can't really be overridden by CSS.

It is possible to make the menus fade in, instead of sliding in.

brandofamily · September 2, 2013

Lamah wrote: »

The reason the movement is so quick is that SmugMug's JavaScript is controlling the source position of the menus, and as far as I can figure, this can't really be overridden by CSS.

It is possible to make the menus fade in, instead of sliding in.

YES! I think that might look nice... Anything to be different and look more professional... not cookie cutter...
To bad no JS:cry

here's a direct link to a page...
http://www.brandolinoimaging.com/Image-Galleries

thenickdude · September 2, 2013

Try this:

.yui3-menu-children {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}
.yui3-menu-open > .yui3-menu-children {
    opacity: 1;
}

brandofamily · September 3, 2013

Lamah wrote: »

Try this:

.yui3-menu-children {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}
.yui3-menu-open > .yui3-menu-children {
    opacity: 1;
}

Perfect! Thanks again!

brandofamily · September 3, 2013

Lamah wrote: »

Try this:

.yui3-menu-children {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}
.yui3-menu-open > .yui3-menu-children {
    opacity: 1;
}

I tried all kinds of code, but opacity never crossed my mind.

Please decode this code please

Comments