Announcement

Collapse
No announcement yet.

Mega Menu Intergration

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
    #1

    Mega Menu Intergration

    Actinic V11

    Silver Theme

    Hey Guys,

    Ive seen that a couple of users have managed to take a standard actinic Mega Menu from one theme and implement them into another.

    The standard Mega Menu is perfect for what im after on my Silver Theme layout, what would the difficulty be in doing this?

    Before i waste hours trying it, is it something a novice can do with some guidance?

    And i dont know where to post this, but any designer who can help me out there could be some £ in it for you. (Not stacks)

    Below is an example of the Mega Menu i want to use, and its also on a silver theme

    http://www.runnersworld.ltd.uk/

    (Ive tryed contacting the owner for help)

    So, where to start?
    Tags: None
    #2
    To add the Megamenu, instructions below for Silver Theme (can be added to other v11 themes as long as you edit the right outer layout and put the code in the right place so not to affect the layout).

    Go to Design menu > Library > Layouts > Web Page Outer Layouts > double click "Outer Layout For Silver Theme".

    Find this line of code (on line 84 by default):
    Code:
    <div id="silver-main">
    Immediately above that line of code, paste the below code:
    Code:
    <!-- Start of Navigation Bar -->
<div class="navigation-bar">
<actinic:variable name="ActinicMegaMenu" />
</div>
<!-- End of Navigation Bar -->
    Click Apply > OK.

    Then go to Design menu > Library > Layouts > Web Page Outer Layouts > double click "Actinic Stylesheet". At the bottom add the following code (this is default Megamenu code from the Actinic stylesheet used for the "Fresh" theme which has the Megamenu).

    Code:
    /* Navigation bar styles */

.navigation-bar {
	height: 30px;
	background: url('benchmark-navigation-bg.gif') repeat-x;
	margin: 0 10px 10px 10px;
	}

.navigation-bar ul {
	list-style-type:none;
	padding:0;
	margin:0;
	text-align: center;
	float: left;
	position: relative;
}

.navigation-bar ul li {
   display:block;
	float:left;
   list-style:none;
	margin:0;
	padding:0;
	position:relative;
} 

.navigation-bar ul li a, .navigation-bar ul li a:visited {
   color: <actinic:variable name="PaletteBG" />;
   display: block;
   float: left;
   font-size: 13px;
   line-height: 30px;
   padding: 0 10px;
   text-align: center;
	background: url('benchmark-nav-separator.gif') right no-repeat;
}

.navigation-bar ul li a:hover {
	color: <actinic:variable name="Palette3" />;
	text-decoration: none;
}

/* Mega Menu styles */

.navigation-bar {
	z-index:999999;
}

.navigation-bar ul {
	list-style-type:none;
	}

.navigation-bar ul li#last {

}

/* Used to style hover/selected action on top level links */
.navigation-bar ul li a.sel:link, 
.navigation-bar ul li a.sel:visited, 
.navigation-bar ul li a.sel:active {
	color: <actinic:variable name="Palette3" />;
	text-decoration: none;
}

/* Drop Down Box */
.navigation-bar ul li div {
	position:absolute;
	top: 30px;
	text-align:left;
	display:none;
	border:1px solid <actinic:variable name="Palette1" />;
	background:<actinic:variable name="PaletteBG" /> url('grey-grad.jpg') repeat-x left bottom;
	padding:10px;
	width:<actinic:block php="true">echo (<actinic:variable name="MaxNumDropColumns" /> * (<actinic:variable name="DropColumnWidth" /> + 12));</actinic:block>px;
	z-index:9999999;
}

.navigation-bar ul li div div{
	text-align:left;
	display:block;
	position:relative;
	top:0px;
	width:100%;
}

.lastMenudiv {
	right:0px;
}

.navigation-bar ul li div ul {
	width:<actinic:variable name="DropColumnWidth" />px;
	float:left;
	margin:0px 5px 0px 0px;
}

.navigation-bar ul li div ul.last {
	border-right:none;
	margin-right:0px;
}

.navigation-bar ul li div ul li {
	float:none;
	background:none;
	padding:3px 0px;
	border-right:none;
}

.navigation-bar ul li div ul li a {
	color:<actinic:variable name="TextColor" />;
	font-size:11px;
	text-align:left;
	float:none;
	padding:0px;
	height:auto;
	line-height:normal;
	background:none;
}

.navigation-bar ul li div ul li a:hover, .navigation-bar ul li div ul li a:visited {
	color:<actinic:variable name="Palette2" />;
	background:none;
	text-decoration:none;
} 

/* Styles for each row of links */
.navigation-bar ul li div .row {
	clear:both;
	height: 1%;
	overflow: hidden;	
	background:none;
	border:none;
}

/* Used to overwrite id's styles */
a.dropheading {
	background:#efefef !important;
	border:1px solid #ccc;
	padding:5px 10px !important;
	margin:0px 0px 0px 0px !important;
	height:auto !important;
	line-height:normal !important;
	display:block;
	font-weight:bold;
}

a.droplink, a.dropfooter {
	color:#333 !important;
	background:none !important;
	margin-left:12px !important;
	display:block;
}

a.droplink:hover, a.dropfooter:hover {
	color:<actinic:variable name="Palette1" /> !important;
}

/* end mega menu */
    Click Apply > OK > Close.

    Note: The above code references the following 3 images which should be in your Site1 installation folder, if they are not there copy them from Program Files > V11 > Formats > Themes > Fresh:
    benchmark-navigation-bg.gif
    benchmark-nav-separator.gif
    grey-grad.jpg

    The gif images should colourise according to your colour scheme, but you may need to re-select a colour scheme to enforce changes.

    Click on a different page in the content tree and do a preview. Megamenu should appear. You may need to do some styling to alter the position on the layout and the colours etc.
    Peblaco

    Comment

      #3
      Originally posted by peblaco View Post
      To add the Megamenu, instructions below for Silver Theme (can be added to other v11 themes as long as you edit the right outer layout and put the code in the right place so not to affect the layout).

      Go to Design menu > Library > Layouts > Web Page Outer Layouts > double click "Outer Layout For Silver Theme".

      Find this line of code (on line 84 by default):
      Code:
      <div id="silver-main">
      Immediately above that line of code, paste the below code:
      Code:
      <!-- Start of Navigation Bar -->
<div class="navigation-bar">
<actinic:variable name="ActinicMegaMenu" />
</div>
<!-- End of Navigation Bar -->
      Click Apply > OK.

      Then go to Design menu > Library > Layouts > Web Page Outer Layouts > double click "Actinic Stylesheet". At the bottom add the following code (this is default Megamenu code from the Actinic stylesheet used for the "Fresh" theme which has the Megamenu).

      Code:
      /* Navigation bar styles */

.navigation-bar {
	height: 30px;
	background: url('benchmark-navigation-bg.gif') repeat-x;
	margin: 0 10px 10px 10px;
	}

.navigation-bar ul {
	list-style-type:none;
	padding:0;
	margin:0;
	text-align: center;
	float: left;
	position: relative;
}

.navigation-bar ul li {
   display:block;
	float:left;
   list-style:none;
	margin:0;
	padding:0;
	position:relative;
} 

.navigation-bar ul li a, .navigation-bar ul li a:visited {
   color: <actinic:variable name="PaletteBG" />;
   display: block;
   float: left;
   font-size: 13px;
   line-height: 30px;
   padding: 0 10px;
   text-align: center;
	background: url('benchmark-nav-separator.gif') right no-repeat;
}

.navigation-bar ul li a:hover {
	color: <actinic:variable name="Palette3" />;
	text-decoration: none;
}

/* Mega Menu styles */

.navigation-bar {
	z-index:999999;
}

.navigation-bar ul {
	list-style-type:none;
	}

.navigation-bar ul li#last {

}

/* Used to style hover/selected action on top level links */
.navigation-bar ul li a.sel:link, 
.navigation-bar ul li a.sel:visited, 
.navigation-bar ul li a.sel:active {
	color: <actinic:variable name="Palette3" />;
	text-decoration: none;
}

/* Drop Down Box */
.navigation-bar ul li div {
	position:absolute;
	top: 30px;
	text-align:left;
	display:none;
	border:1px solid <actinic:variable name="Palette1" />;
	background:<actinic:variable name="PaletteBG" /> url('grey-grad.jpg') repeat-x left bottom;
	padding:10px;
	width:<actinic:block php="true">echo (<actinic:variable name="MaxNumDropColumns" /> * (<actinic:variable name="DropColumnWidth" /> + 12));</actinic:block>px;
	z-index:9999999;
}

.navigation-bar ul li div div{
	text-align:left;
	display:block;
	position:relative;
	top:0px;
	width:100%;
}

.lastMenudiv {
	right:0px;
}

.navigation-bar ul li div ul {
	width:<actinic:variable name="DropColumnWidth" />px;
	float:left;
	margin:0px 5px 0px 0px;
}

.navigation-bar ul li div ul.last {
	border-right:none;
	margin-right:0px;
}

.navigation-bar ul li div ul li {
	float:none;
	background:none;
	padding:3px 0px;
	border-right:none;
}

.navigation-bar ul li div ul li a {
	color:<actinic:variable name="TextColor" />;
	font-size:11px;
	text-align:left;
	float:none;
	padding:0px;
	height:auto;
	line-height:normal;
	background:none;
}

.navigation-bar ul li div ul li a:hover, .navigation-bar ul li div ul li a:visited {
	color:<actinic:variable name="Palette2" />;
	background:none;
	text-decoration:none;
} 

/* Styles for each row of links */
.navigation-bar ul li div .row {
	clear:both;
	height: 1%;
	overflow: hidden;	
	background:none;
	border:none;
}

/* Used to overwrite id's styles */
a.dropheading {
	background:#efefef !important;
	border:1px solid #ccc;
	padding:5px 10px !important;
	margin:0px 0px 0px 0px !important;
	height:auto !important;
	line-height:normal !important;
	display:block;
	font-weight:bold;
}

a.droplink, a.dropfooter {
	color:#333 !important;
	background:none !important;
	margin-left:12px !important;
	display:block;
}

a.droplink:hover, a.dropfooter:hover {
	color:<actinic:variable name="Palette1" /> !important;
}

/* end mega menu */
      Click Apply > OK > Close. Click on a different page in the content tree and do a preview. Megamenu should appear. You may need to do some styling to alter the position on the layout and the colours etc.
      Right, that seems easier than expected!

      Ill give this a go ASAP. If it works, ill be eternily greatful.

      Do you know if it will use the Store top sections as the drop down?

      Comment

        #4
        I just updated the first post with a note about 3 images be sure to check those too.

        The Store top (Top Level Sections) should run horizontally and be used for the drop downs.
        Peblaco

        Comment

          #5
          Originally posted by peblaco View Post
          I just updated the first post with a note about 3 images be sure to check those too.

          The Store top (Top Level Sections) should run horizontally and be used for the drop downs.
          Your a star!

          Ive tried adding the Mega Menu above the Silver Nav bar, but im getting a layout issue. Any ideas?

          Comment

            #6
            If you put the menu above <div id="silver-nav-bar"> it won't work, logo and cart links are floated and need clearing. Add the following above the menu: <div class="spacer"></div>
            Peblaco

            Comment

              #7
              All sorted! Check out my Sig for the results.

              Mega Menu in Silver Theme. Another Silver Modification

              Comment

                #8
                For some reason though the Mega Menu wont work for "Pitched Roofing"

                It is set to True within this section... Hmmm...

                Comment

                Previous template Next
                Working...
                X