Options

menu - drop down menu "from scratch"

DeeRichDeeRich Registered Users Posts: 76 Big grins
edited September 21, 2014 in SmugMug Customization
Can someone add the correct code that will cause the "HOW TO UPLOAD" link to appear (one row down, indented) when the UPLOAD link is hovered over:

Example:
UPLOAD
.......HOW TO UPLOAD


<div class="menu">
<ul>
<li><a class="drop" href="LINK">HOME</a>
<ul>
<li><a href="LINK">NAME OF GALLERY</a></li>
<li><a href="LINK">NAME OF GALLERY</a></li>
<li><a href="LINK">NAME OF GALLERY</a></li>
<li><a href="LINK">NAME OF GALLERY</a></li>
<li><a href="LINK">NAME OF GALLERY</a></li>
<li><a href="LINK">NAME OF GALLERY</a></li>
<li><a href="LINK">NAME OF GALLERY</a></li>
<li><a href="LINK">NAME OF GALLERY</a></li>
<li><a href="LINK" target="_blank">UPLOAD</a><li>
<li><a href="LINK" target="_blank">HOW TO UPLOAD - WANT THIS ONE TO DROP ONE ROW DOWN, INDENTED, WHEN THE ONE ABOVE IS HOVERED OVER</a></li>
</ul>

Got my codes from this link: http://www.dgrin.com/showthread.php?t=168571

Would appreciate it SOOOO much.:bow

Deerich
www.oursite.smugmug.com

Comments

  • Options
    AllenAllen Registered Users Posts: 10,011 Major grins
    edited September 20, 2014
    DeeRich wrote: »
    Can someone tell me how to make the "How to Upload" link be a "sub", "drop" link of the "Upload" link; i.e.,:

    Upload
    .......How to Upload

    <div class="menu">
    <ul>
    <li><a class="drop" href="LINK">HOME</a>
    <ul>
    <li><a href="LINK">NAME OF GALLERY</a></li>
    <li><a href="LINK">NAME OF GALLERY</a></li>
    <li><a href="LINK">NAME OF GALLERY</a></li>
    <li><a href="LINK">NAME OF GALLERY</a></li>
    <li><a href="LINK">NAME OF GALLERY</a></li>
    <li><a href="LINK">NAME OF GALLERY</a></li>
    <li><a href="LINK">NAME OF GALLERY</a></li>
    <li><a href="LINK">NAME OF GALLERY</a></li>
    <li><a href="LINK" target="_blank">UPLOAD</a><li>
    <li><a href="LINK" target="_blank">HOW TO UPLOAD - WANT THIS ONE TO DROP ONE ROW DOWN, INDENTED, WHEN THE ONE ABOVE IS HOVERED OVER</a></li>
    </ul>

    Got my codes from this link: http://www.dgrin.com/showthread.php?t=168571

    Would appreciate it SOOOO much.<img src="https://us.v-cdn.net/6029383/emoji/bowdown.gif&quot; border="0" alt="" >

    Deerich
    www.oursite.smugmug.com
    Try this 
    ...
...
[COLOR=Red]
      <li><a  class="drop" href="/upload/SMqQfb/Photos"
 target="_blank">Upload</a>
         <ul>
           <li><a href="/All-Folders/Other/Upload-Easy-Steps/n-B92k6"
 target="_blank"><i>...How to Upload</i></a></li>
         </ul>
      </li>[/COLOR]
  </ul>
</div>
....
...

    Looks like CSS needs some tweakin' also.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Options
    DeeRichDeeRich Registered Users Posts: 76 Big grins
    edited September 21, 2014
    Allen, thanks so much; it worked like a charm - though the CSS was a bugger to go through and figure out.

    I do have a couple questions:

    (1) I never did find any CSS code (or HTML) that specifically said "Center", i.e., center the word "Home" (the menu box) on the gallery page. Here is the only code that would center it (at least on the current theme)...but, is this right...will this look centered on others computers?

    .menu {
    z-index:99;
    position:relative; /* Make the container moveable */
    margin: auto auto 0px; /* top R/L bottom */
    width:90px; /* Main bar total width, minimize to not wrap to two lines*/
    }


    (2) Now, after adding the menu box codes, I am unable to DELETE any of the "Content Boxes", or anything else, anywhere on my site. Is it just my computer "hanging up", or a temporary SmugMug problem, or the new HTML/CSS codes???

    Direct link to "new" drop-down (by the way all the galleries in this folder are not finished): http://oursite.smugmug.com/All-Folders/RKReunion/Photos/#customize

    The reason I am wanting to have a menu like this is because I have certain FOLDERS with many galleries each, AND each folder having their own domain name (can't use the breadcrumb...wish there were "folder independent" breadcrumbs). however, I love the SmugMug drop-down menu (so cool...so good looking), but when I have a folder with 9 galleries, and want the menu on every gallery with links to all the other galleries, it is terribly time-consuming to create (wish I could copy and paste the SmugMug menu). Anyway, now, with the menu I have just created (with your help) I can just copy and paste the menu to all the galleries in a folder, in a matter of minutes.

    Thanks again,

    DeeRich
    www.oursite.smugmug.com
    aka RichardsGalleries.com
  • Options
    AllenAllen Registered Users Posts: 10,011 Major grins
    edited September 21, 2014
    (1) the auto L/R margin centers the main menu "width". The main menu is filled with buttons left to right so
    getting the total width minimized without wrapping to another line is important to look centered.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Options
    DeeRichDeeRich Registered Users Posts: 76 Big grins
    edited September 21, 2014
    Allen wrote: »
    (1) the auto L/R margin centers the main menu "width". The main menu is filled with buttons left to right so
    getting the total width minimized without wrapping to another line is important to look centered.

    Thank you!

    DeeRich
Sign In or Register to comment.