DEV: Refactor and improvements
* converts some items to flexbox and removes old caret styles * code refactor The component now uses template literals for better readability. This commit also minimizes the dropdown library * adds scrollable menu feature on mobile * code formatting and placeholder fix * removes unwanted styles
This commit is contained in:
Joe
GitHub
parent
1a048e0c97
commit
b57ecc4a4d
|
|
@ -69,7 +69,7 @@ $divider-color: null !default;
|
||||||
|
|
||||||
.wrap {
|
.wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-start;
|
align-items: center;
|
||||||
|
|
||||||
@if $Invert_position == "true" {
|
@if $Invert_position == "true" {
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
|
|
@ -83,6 +83,9 @@ $divider-color: null !default;
|
||||||
font-size: $font-up-1;
|
font-size: $font-up-1;
|
||||||
line-height: $line-height-medium;
|
line-height: $line-height-medium;
|
||||||
transition: all 0.15s;
|
transition: all 0.15s;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
&:first-of-type {
|
&:first-of-type {
|
||||||
margin-left: -12px;
|
margin-left: -12px;
|
||||||
|
|
@ -117,24 +120,16 @@ $divider-color: null !default;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.fa-caret-down {
|
.d-icon-caret-down {
|
||||||
margin-right: 0;
|
|
||||||
margin-left: 5px;
|
|
||||||
transform: rotate(-90deg);
|
transform: rotate(-90deg);
|
||||||
transition: transform ease 0.15s;
|
transition: transform ease 0.15s;
|
||||||
|
|
||||||
.rtl & {
|
.rtl & {
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 5px;
|
|
||||||
transform: rotate(90deg);
|
transform: rotate(90deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
@if $Show_caret == "false" {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.d-dropdown-open .fa-caret-down {
|
.d-dropdown-open .d-icon-caret-down {
|
||||||
transform: rotate(0);
|
transform: rotate(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -163,7 +158,8 @@ $divider-color: null !default;
|
||||||
}
|
}
|
||||||
|
|
||||||
.d-dropdown-menu li > a {
|
.d-dropdown-menu li > a {
|
||||||
display: block;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
color: $submenu-item-color;
|
color: $submenu-item-color;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
|
|
|
||||||
|
|
@ -8,250 +8,119 @@
|
||||||
*
|
*
|
||||||
* @license: MIT license: http://opensource.org/licenses/MIT
|
* @license: MIT license: http://opensource.org/licenses/MIT
|
||||||
*/
|
*/
|
||||||
if (jQuery)
|
jQuery&&function(n){function o(d,t){var o=d?n(this):t,r=n(o.attr("data-d-dropdown")),e=o.hasClass("d-dropdown-open");if(d){if(n(d.target).hasClass("d-dropdown-ignore"))return;d.preventDefault(),d.stopPropagation()}else if(o!==t.target&&n(t.target).hasClass("d-dropdown-ignore"))return;s(),e||o.hasClass("d-dropdown-disabled")||(o.addClass("d-dropdown-open"),r.data("d-dropdown-trigger",o).show(),a(),r.trigger("show",{dDropdown:r,trigger:o}))}function s(d){var t=d?n(d.target).parents().addBack():null;if(t&&t.is(".d-dropdown")){if(!t.is(".d-dropdown-menu"))return;if(!t.is("A"))return}n(document).find(".d-dropdown:visible").each(function(){var d=n(this);d.hide().removeData("d-dropdown-trigger").trigger("hide",{dDropdown:d})}),n(document).find(".d-dropdown-open").removeClass("d-dropdown-open")}function a(){var d=n(".d-dropdown:visible").eq(0),t=d.data("d-dropdown-trigger"),o=t?parseInt(t.attr("data-horizontal-offset")||0,10):null,r=t?parseInt(t.attr("data-vertical-offset")||0,10):null;0!==d.length&&t&&(d.hasClass("d-dropdown-relative")?d.css({left:d.hasClass("d-dropdown-anchor-right")?t.position().left-(d.outerWidth(!0)-t.outerWidth(!0))-parseInt(t.css("margin-right"),10)+o:t.position().left+parseInt(t.css("margin-left"),10)+o,top:t.position().top+t.outerHeight(!0)-parseInt(t.css("margin-top"),10)+r}):d.css({left:d.hasClass("d-dropdown-anchor-right")?t.offset().left-(d.outerWidth()-t.outerWidth())+o:t.offset().left+o,top:t.offset().top+t.outerHeight()+r}))}n.extend(n.fn,{dDropdown:function(d,t){switch(d){case"show":return o(null,n(this)),n(this);case"hide":return s(),n(this);case"attach":return n(this).attr("data-d-dropdown",t);case"detach":return s(),n(this).removeAttr("data-d-dropdown");case"disable":return n(this).addClass("d-dropdown-disabled");case"enable":return s(),n(this).removeClass("d-dropdown-disabled")}}}),n(document).on("click.d-dropdown","[data-d-dropdown]",o),n(document).on("click.d-dropdown",s),n(document).on("scroll",s),n('.top-menu .wrap').on("scroll",s),n(window).on("resize",a)}(jQuery);
|
||||||
(function($) {
|
|
||||||
$.extend($.fn, {
|
|
||||||
dDropdown: function(method, data) {
|
|
||||||
switch (method) {
|
|
||||||
case "show":
|
|
||||||
show(null, $(this));
|
|
||||||
return $(this);
|
|
||||||
case "hide":
|
|
||||||
hide();
|
|
||||||
return $(this);
|
|
||||||
case "attach":
|
|
||||||
return $(this).attr("data-d-dropdown", data);
|
|
||||||
case "detach":
|
|
||||||
hide();
|
|
||||||
return $(this).removeAttr("data-d-dropdown");
|
|
||||||
case "disable":
|
|
||||||
return $(this).addClass("d-dropdown-disabled");
|
|
||||||
case "enable":
|
|
||||||
hide();
|
|
||||||
return $(this).removeClass("d-dropdown-disabled");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
function show(event, object) {
|
|
||||||
var trigger = event ? $(this) : object,
|
|
||||||
dDropdown = $(trigger.attr("data-d-dropdown")),
|
|
||||||
isOpen = trigger.hasClass("d-dropdown-open");
|
|
||||||
|
|
||||||
if (event) {
|
|
||||||
if ($(event.target).hasClass("d-dropdown-ignore")) return;
|
|
||||||
|
|
||||||
event.preventDefault();
|
|
||||||
event.stopPropagation();
|
|
||||||
} else {
|
|
||||||
if (
|
|
||||||
trigger !== object.target &&
|
|
||||||
$(object.target).hasClass("d-dropdown-ignore")
|
|
||||||
)
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
hide();
|
|
||||||
|
|
||||||
if (isOpen || trigger.hasClass("d-dropdown-disabled")) return;
|
|
||||||
|
|
||||||
trigger.addClass("d-dropdown-open");
|
|
||||||
dDropdown.data("d-dropdown-trigger", trigger).show();
|
|
||||||
|
|
||||||
position();
|
|
||||||
|
|
||||||
dDropdown.trigger("show", {
|
|
||||||
dDropdown: dDropdown,
|
|
||||||
trigger: trigger
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function hide(event) {
|
|
||||||
var targetGroup = event
|
|
||||||
? $(event.target)
|
|
||||||
.parents()
|
|
||||||
.addBack()
|
|
||||||
: null;
|
|
||||||
|
|
||||||
if (targetGroup && targetGroup.is(".d-dropdown")) {
|
|
||||||
if (targetGroup.is(".d-dropdown-menu")) {
|
|
||||||
if (!targetGroup.is("A")) return;
|
|
||||||
} else {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$(document)
|
|
||||||
.find(".d-dropdown:visible")
|
|
||||||
.each(function() {
|
|
||||||
var dDropdown = $(this);
|
|
||||||
dDropdown
|
|
||||||
.hide()
|
|
||||||
.removeData("d-dropdown-trigger")
|
|
||||||
.trigger("hide", { dDropdown: dDropdown });
|
|
||||||
});
|
|
||||||
|
|
||||||
$(document)
|
|
||||||
.find(".d-dropdown-open")
|
|
||||||
.removeClass("d-dropdown-open");
|
|
||||||
}
|
|
||||||
|
|
||||||
function position() {
|
|
||||||
var dDropdown = $(".d-dropdown:visible").eq(0),
|
|
||||||
trigger = dDropdown.data("d-dropdown-trigger"),
|
|
||||||
hOffset = trigger
|
|
||||||
? parseInt(trigger.attr("data-horizontal-offset") || 0, 10)
|
|
||||||
: null,
|
|
||||||
vOffset = trigger
|
|
||||||
? parseInt(trigger.attr("data-vertical-offset") || 0, 10)
|
|
||||||
: null;
|
|
||||||
|
|
||||||
if (dDropdown.length === 0 || !trigger) return;
|
|
||||||
|
|
||||||
if (dDropdown.hasClass("d-dropdown-relative")) {
|
|
||||||
dDropdown.css({
|
|
||||||
left: dDropdown.hasClass("d-dropdown-anchor-right")
|
|
||||||
? trigger.position().left -
|
|
||||||
(dDropdown.outerWidth(true) - trigger.outerWidth(true)) -
|
|
||||||
parseInt(trigger.css("margin-right"), 10) +
|
|
||||||
hOffset
|
|
||||||
: trigger.position().left +
|
|
||||||
parseInt(trigger.css("margin-left"), 10) +
|
|
||||||
hOffset,
|
|
||||||
top:
|
|
||||||
trigger.position().top +
|
|
||||||
trigger.outerHeight(true) -
|
|
||||||
parseInt(trigger.css("margin-top"), 10) +
|
|
||||||
vOffset
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
dDropdown.css({
|
|
||||||
left: dDropdown.hasClass("d-dropdown-anchor-right")
|
|
||||||
? trigger.offset().left -
|
|
||||||
(dDropdown.outerWidth() - trigger.outerWidth()) +
|
|
||||||
hOffset
|
|
||||||
: trigger.offset().left + hOffset,
|
|
||||||
top: trigger.offset().top + trigger.outerHeight() + vOffset
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
$(document).on("click.d-dropdown", "[data-d-dropdown]", show);
|
|
||||||
$(document).on("click.d-dropdown", hide);
|
|
||||||
$(document).on("scroll", hide);
|
|
||||||
$(window).on("resize", position);
|
|
||||||
})(jQuery);
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<script type="text/discourse-plugin" version="0.8.23">
|
<script type="text/discourse-plugin" version="0.8.23">
|
||||||
const { iconHTML } = require("discourse-common/lib/icon-library");
|
|
||||||
|
|
||||||
let sec = "",
|
function cleanUp(item) {
|
||||||
seg = "",
|
return item.replace(/\s+/g, "-").toLowerCase();
|
||||||
|
}
|
||||||
|
|
||||||
|
function exists(item) {
|
||||||
|
return (
|
||||||
|
item &&
|
||||||
|
item.length &&
|
||||||
|
item !== "null" &&
|
||||||
|
item !== "none" &&
|
||||||
|
item !== "None" &&
|
||||||
|
item !== " " &&
|
||||||
|
item !== ""
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const { iconHTML } = require("discourse-common/lib/icon-library"),
|
||||||
|
rtlClass = settings.RTL_support ? "d-dropdown-anchor-right" : "",
|
||||||
|
caret = settings.Show_caret
|
||||||
|
? iconHTML("caret-down", { class: "header-menu-caret" })
|
||||||
|
: "";
|
||||||
|
|
||||||
|
let sec = $.map(settings.Menu_items.split("|"), $.trim),
|
||||||
|
seg = $.map(settings.Submenu_items.split("|"), $.trim),
|
||||||
rawMain = "",
|
rawMain = "",
|
||||||
mainUl = "";
|
mainUl = "";
|
||||||
|
|
||||||
sec = $.map(settings.Menu_items.split("|"), $.trim);
|
|
||||||
seg = $.map(settings.Submenu_items.split("|"), $.trim);
|
|
||||||
rtl = settings.RTL_support;
|
|
||||||
|
|
||||||
if (rtl) {
|
|
||||||
rtlClass = "d-dropdown-anchor-right";
|
|
||||||
} else {
|
|
||||||
rtlClass = "";
|
|
||||||
}
|
|
||||||
|
|
||||||
$.each(sec, function() {
|
$.each(sec, function() {
|
||||||
var sec = $.map(this.split(","), $.trim);
|
const sec = $.map(this.split(","), $.trim),
|
||||||
var icon = sec[1].length && sec[1] != 'none' ? iconHTML(sec[1]) : '';
|
text = sec[0],
|
||||||
rawMain +=
|
trigger = cleanUp(sec[0]),
|
||||||
'<a data-d-dropdown="#' +
|
title = sec[2],
|
||||||
sec[0] +
|
viewClass = sec[3],
|
||||||
'" class="' +
|
icon = exists(sec[1])
|
||||||
sec[3] +
|
? iconHTML(cleanUp(sec[1]), { class: "header-menu-icon" })
|
||||||
'" title="' +
|
: "";
|
||||||
sec[2] +
|
|
||||||
'">' +
|
rawMain += `<a
|
||||||
icon +
|
data-d-dropdown="#${trigger}"
|
||||||
sec[0] +
|
class="${viewClass} ${trigger}"
|
||||||
iconHTML("caret-down") +
|
title="${title}">
|
||||||
'</a><div id="' +
|
${icon}
|
||||||
sec[0] +
|
${text}
|
||||||
'" class="d-dropdown ' +
|
${caret}
|
||||||
rtlClass +
|
</a>
|
||||||
'"><ul class="d-dropdown-menu"></ul></div>';
|
<div id="${trigger}" class="d-dropdown ${rtlClass}">
|
||||||
|
<ul class="d-dropdown-menu"></ul>
|
||||||
|
</div>`;
|
||||||
});
|
});
|
||||||
|
|
||||||
$("#top-menu .wrap").html(rawMain);
|
$("#top-menu .wrap").html(rawMain);
|
||||||
|
|
||||||
$.each(sec, function() {
|
$.each(sec, function() {
|
||||||
var sec = $.map(this.split(","), $.trim);
|
let sec = $.map(this.split(","), $.trim),
|
||||||
mainUl = $("#" + sec[0] + " ul").html();
|
mainUl = "";
|
||||||
|
|
||||||
$.each(seg, function() {
|
$.each(seg, function() {
|
||||||
var seg = $.map(this.split(","), $.trim),
|
const seg = $.map(this.split(","), $.trim),
|
||||||
itemClass = seg[1].replace(/\s+/g, "-").toLowerCase();
|
parentMenu = cleanUp(sec[0]),
|
||||||
|
parentName = cleanUp(seg[0]),
|
||||||
|
text = seg[1],
|
||||||
|
itemClass =
|
||||||
|
seg[4] === "blank" ? `${cleanUp(seg[1])} blank` : cleanUp(seg[1]),
|
||||||
|
href = seg[3],
|
||||||
|
target = seg[4] === "blank" ? "_blank" : "_self",
|
||||||
|
title = exists(seg[5]) ? seg[5] : "",
|
||||||
|
icon = exists(seg[2])
|
||||||
|
? iconHTML(cleanUp(seg[2]), { class: "header-menu-icon" })
|
||||||
|
: "";
|
||||||
|
|
||||||
if (sec[0] == seg[0]) {
|
if (parentName === parentMenu) {
|
||||||
if (seg[1] == "divider") {
|
if (text === "divider") {
|
||||||
mainUl += "<li class='divider'></li>";
|
mainUl += `<li class='divider'></li>`;
|
||||||
return $("#" + sec[0] + " ul").html(mainUl);
|
return $(`#${parentMenu} ul`).html(mainUl);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (seg[2] == null || seg[2] == " ") {
|
mainUl += `<li class="submenu-item ${itemClass}">
|
||||||
seg[2] = "";
|
<a
|
||||||
}
|
target="${target}"
|
||||||
|
title="${title}"
|
||||||
var icon = seg[2].length && seg[2] != 'none' ? iconHTML(seg[2]) : '';
|
class="submenu-link"
|
||||||
|
href="${href}">
|
||||||
if (seg[4] == "blank") {
|
${icon}
|
||||||
seg[4] = "_blank";
|
${text}
|
||||||
itemClass += " blank ";
|
</a>
|
||||||
} else {
|
</li>`;
|
||||||
seg[4] = "_self";
|
$(`#${parentMenu} ul`).html(mainUl);
|
||||||
}
|
|
||||||
|
|
||||||
if (seg[5] == null || seg[5] == " ") {
|
|
||||||
seg[5] = "";
|
|
||||||
}
|
|
||||||
|
|
||||||
mainUl +=
|
|
||||||
'<li class="submenu-item ' +
|
|
||||||
itemClass +
|
|
||||||
'"><a target="' +
|
|
||||||
seg[4] +
|
|
||||||
'" title="' +
|
|
||||||
seg[5] +
|
|
||||||
'" class="submenu-link" href="' +
|
|
||||||
seg[3] +
|
|
||||||
'">' +
|
|
||||||
icon +
|
|
||||||
seg[1] +
|
|
||||||
"</li>";
|
|
||||||
$("#" + sec[0] + " ul").html(mainUl);
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
$(function() {
|
$(".d-dropdown-menu li:not(.blank) a").click(function() {
|
||||||
$(".d-dropdown-menu li:not(.blank) a").click(function() {
|
require("discourse/lib/url").default.routeTo(
|
||||||
require("discourse/lib/url").default.routeTo(
|
$(event.currentTarget).attr("href")
|
||||||
$(event.currentTarget).attr("href")
|
);
|
||||||
);
|
$(document)
|
||||||
$(document)
|
.find(".d-dropdown:visible")
|
||||||
.find(".d-dropdown:visible")
|
.each(function() {
|
||||||
.each(function() {
|
var dDropdown = $(this);
|
||||||
var dDropdown = $(this);
|
dDropdown
|
||||||
dDropdown
|
.hide()
|
||||||
.hide()
|
.removeData("d-dropdown-trigger")
|
||||||
.removeData("d-dropdown-trigger")
|
.trigger("hide", { dDropdown: dDropdown });
|
||||||
.trigger("hide", { dDropdown: dDropdown });
|
});
|
||||||
});
|
$(document)
|
||||||
$(document)
|
.find(".d-dropdown-open")
|
||||||
.find(".d-dropdown-open")
|
.removeClass("d-dropdown-open");
|
||||||
.removeClass("d-dropdown-open");
|
return false;
|
||||||
return false;
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-menu .wrap>a:first-of-type {
|
.top-menu .wrap > a:first-of-type {
|
||||||
margin-left: -10px;
|
margin-left: -10px;
|
||||||
|
|
||||||
.rtl & {
|
.rtl & {
|
||||||
|
|
@ -18,3 +18,20 @@
|
||||||
.vdo {
|
.vdo {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.top-menu .wrap {
|
||||||
|
overflow-x: scroll;
|
||||||
|
> a {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// handles last menu item dropdown position
|
||||||
|
.top-menu .wrap > div:last-of-type {
|
||||||
|
left: unset !important;
|
||||||
|
right: 0 !important;
|
||||||
|
.rtl & {
|
||||||
|
left: 0 !important;
|
||||||
|
right: unset !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
60
settings.yml
60
settings.yml
|
|
@ -2,67 +2,67 @@ Menu_items:
|
||||||
type: list
|
type: list
|
||||||
default: "Design, magic, Get inspired!, vdm|Code, far-keyboard, Learn new things!, vdm|Business, far-money-bill-alt, Start a new career!, vdm|Shop, shopping-cart, Buy cool stuff!, vdo|More, none, Even more cool things!, vdo"
|
default: "Design, magic, Get inspired!, vdm|Code, far-keyboard, Learn new things!, vdm|Business, far-money-bill-alt, Start a new career!, vdm|Shop, shopping-cart, Buy cool stuff!, vdo|More, none, Even more cool things!, vdo"
|
||||||
description:
|
description:
|
||||||
en: 'Add menu items. One item per line in this order: Text, icon, title, view.<br><b>Text:</b> what appears on the menu.<br><b>Icon:</b> the icon displayed next to the item. If you do not want to use an icon, use `none`<br><b>Title:</b> the text that appears when the item is hovered.<br><b>View:</b> Choose what devices the item appears on. `vdm` appears on both desktop and mobile, `vdo` appears on desktops only, `vmo` appears on mobiles only. Due to lack of space, it is reccomended to not add more than 3-4 items on mobile.'
|
en: "Add menu items. One item per line in this order: Text, icon, title, view.<br><b>Text:</b> what appears on the menu.<br><b>Icon:</b> the icon displayed next to the item. If you do not want to use an icon, use `none`<br><b>Title:</b> the text that appears when the item is hovered.<br><b>View:</b> Choose what devices the item appears on. `vdm` appears on both desktop and mobile, `vdo` appears on desktops only, `vmo` appears on mobiles only. Due to lack of space, it is reccomended to not add more than 3-4 items on mobile."
|
||||||
Submenu_items:
|
Submenu_items:
|
||||||
type: list
|
type: list
|
||||||
default: "Design, Galleries, th, #, blank, Cool galleries for you to look at.|Design, Design process, far-lightbulb, #, blank, Learn the basics.|Design, Blog design, columns, #, blank, What makes for a great blog?|Design, divider|Design, Freebies, gift, #, blank, Everyone likes freebies!|Design, Photoshop tutorials, book, #, blank, Photoshop for beginners.|Design, Design trends, far-chart-bar, #, blank, Stay on top of the current trends! |Code, fab-wordpress, wordpress, #, blank, Wordpress code examples|Code, Tools, wrench, #, blank, Tools that will make your life easier!|Code, Tutorials, fab-leanpub, #, blank, Just starting out? We'll guide you through the basics|Business, Blogging, none, #, blank, Why not start a blog?|Business, Social media, none, #, blank, Learn how to leverage Social media and make it work for your business |Business, Make money, none, #, blank, Everyone like to be paid!|Business, Marketing, none, #, blank, No business will survive without customers...Here's how to get'em!|Shop, Vectors, none, #, blank,|Shop, Textures, none, #, blank,|Shop, Brushes, none, #, blank,|Shop, divider|Shop, UI kits, none, #, blank,|Shop, Templates , none, #, blank,|Shop, PSDs, none, #, blank,|More, About us, none, /about, self, Meet the gang!|More, Contact us, none, #, blank, Let's get in touch|More, Terms of Service, none, /tos, self, |More, Privacy policy, none, /privacy, self"
|
default: "Design, Galleries, th, #, blank, Cool galleries for you to look at.|Design, Design process, far-lightbulb, #, blank, Learn the basics.|Design, Blog design, columns, #, blank, What makes for a great blog?|Design, divider|Design, Freebies, gift, #, blank, Everyone likes freebies!|Design, Photoshop tutorials, book, #, blank, Photoshop for beginners.|Design, Design trends, far-chart-bar, #, blank, Stay on top of the current trends! |Code, Wordpress, wordpress, #, blank, Wordpress code examples|Code, Tools, wrench, #, blank, Tools that will make your life easier!|Code, Tutorials, fab-leanpub, #, blank, Just starting out? We'll guide you through the basics|Business, Blogging, none, #, blank, Why not start a blog?|Business, Social media, none, #, blank, Learn how to leverage Social media and make it work for your business |Business, Make money, none, #, blank, Everyone like to be paid!|Business, Marketing, none, #, blank, No business will survive without customers...Here's how to get'em!|Shop, Vectors, none, #, blank,|Shop, Textures, none, #, blank,|Shop, Brushes, none, #, blank,|Shop, divider|Shop, UI kits, none, #, blank,|Shop, Templates , none, #, blank,|Shop, PSDs, none, #, blank,|More, About us, none, /about, self, Meet the gang!|More, Contact us, none, #, blank, Let's get in touch|More, Terms of Service, none, /tos, self, |More, Privacy policy, none, /privacy, self"
|
||||||
|
description:
|
||||||
|
en: "Add submenu items. One item per line in this order: Parent, text, icon, URL, target, title.<br><b>Parent:</b> the name of the parent menu item which this submenu item show under. Use the `text` value from the list above<br><b>Text:</b> the text that shows for this submenu item.<br><b>Icon:</b> the icon for this submenu item, use `none` if no icon is needed<br><b>URL:</b> the path this menu item links to. You can use relative paths as well.<br><b>Target:</b> Choose whether this item will open in a new tab or in the same tab. Use `blank` to open the link in a new tab, or use `self` to open it in the same tab.<br><b>Title:</b> the text that shows when the item is hovered.<br><b>Dividers:</b> You can also add dividers between submenu items. To add a divider user `parent, divider`"
|
||||||
|
Svg_icons:
|
||||||
|
type: "list"
|
||||||
|
list_type: "compact"
|
||||||
|
default: "fa-magic|far-keyboard|far-money-bill-alt|fa-shopping-cart|far-lightbulb|fa-columns|fa-gift|fa-book|far-chart-bar|fab-wordpress|fa-wrench|fab-leanpub"
|
||||||
description:
|
description:
|
||||||
en: 'Add submenu items. One item per line in this order: Parent, text, icon, URL, target, title.<br><b>Parent:</b> the name of the parent menu item which this submenu item show under. Use the `text` value from the list above<br><b>Text:</b> the text that shows for this submenu item.<br><b>Icon:</b> the icon for this submenu item, use `none` if no icon is needed<br><b>URL:</b> the path this menu item links to. You can use relative paths as well.<br><b>Target:</b> Choose whether this item will open in a new tab or in the same tab. Use `blank` to open the link in a new tab, or use `self` to open it in the same tab.<br><b>Title:</b> the text that shows when the item is hovered.<br><b>Dividers:</b> You can also add dividers between submenu items. To add a divider user `parent, divider`'
|
|
||||||
Svg_icons:
|
|
||||||
type: 'list'
|
|
||||||
list_type: 'compact'
|
|
||||||
default: 'fa-magic|far-keyboard|far-money-bill-alt|fa-shopping-cart|far-lightbulb|fa-columns|fa-gift|fa-book|far-chart-bar|fab-wordpress|fa-wrench|fab-leanpub'
|
|
||||||
description:
|
|
||||||
en: "Include FontAwesome icon classes for each icon used in the lists above."
|
en: "Include FontAwesome icon classes for each icon used in the lists above."
|
||||||
Fixed_mode:
|
Fixed_mode:
|
||||||
default: false
|
default: false
|
||||||
description:
|
description:
|
||||||
en: 'Force the menu to be visible on top regardless of scroll - Desktop only'
|
en: "Force the menu to be visible on top regardless of scroll - Desktop only"
|
||||||
Show_caret:
|
Show_caret:
|
||||||
default: true
|
default: true
|
||||||
description:
|
description:
|
||||||
en: 'Show caret icon next to menu items'
|
en: "Show caret icon next to menu items"
|
||||||
Invert_position:
|
Invert_position:
|
||||||
default: false
|
default: false
|
||||||
description:
|
description:
|
||||||
en: 'Display menu items on the opposite side of the screen'
|
en: "Display menu items on the opposite side of the screen"
|
||||||
RTL_support:
|
RTL_support:
|
||||||
default: false
|
default: false
|
||||||
description:
|
description:
|
||||||
en: 'Enable RTL support'
|
en: "Enable RTL support"
|
||||||
Menu_background:
|
Menu_background:
|
||||||
default: ''
|
default: ""
|
||||||
description:
|
description:
|
||||||
en: 'Background color for the menu'
|
en: "Background color for the menu"
|
||||||
Menu_item_color:
|
Menu_item_color:
|
||||||
default: ''
|
default: ""
|
||||||
description:
|
description:
|
||||||
en: 'Color for menu items'
|
en: "Color for menu items"
|
||||||
Menu-item-active-background:
|
Menu-item-active-background:
|
||||||
default: ''
|
default: ""
|
||||||
description:
|
description:
|
||||||
en: 'Background color for menu items when active'
|
en: "Background color for menu items when active"
|
||||||
Menu-item-active-color:
|
Menu-item-active-color:
|
||||||
default: ''
|
default: ""
|
||||||
description:
|
description:
|
||||||
en: 'Color for menu items when active'
|
en: "Color for menu items when active"
|
||||||
Submenu_background:
|
Submenu_background:
|
||||||
default: ''
|
default: ""
|
||||||
description:
|
description:
|
||||||
en: 'Background color for submenus'
|
en: "Background color for submenus"
|
||||||
Submenu_item_color:
|
Submenu_item_color:
|
||||||
default: ''
|
default: ""
|
||||||
description:
|
description:
|
||||||
en: 'Color for submenu items'
|
en: "Color for submenu items"
|
||||||
Submenu_item_hover_background:
|
Submenu_item_hover_background:
|
||||||
default: ''
|
default: ""
|
||||||
description:
|
description:
|
||||||
en: 'Background color for submenus items when hovered'
|
en: "Background color for submenus items when hovered"
|
||||||
Submenu_item_hover_color:
|
Submenu_item_hover_color:
|
||||||
default: ''
|
default: ""
|
||||||
description:
|
description:
|
||||||
en: 'Color for submenus items when hovered'
|
en: "Color for submenus items when hovered"
|
||||||
Divider_color:
|
Divider_color:
|
||||||
default: ''
|
default: ""
|
||||||
description:
|
description:
|
||||||
en: 'Color for divider lines in submenus'
|
en: "Color for divider lines in submenus"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue