diff --git a/css/ddsmoothmenu-v.css b/css/ddsmoothmenu-v.css new file mode 100644 index 0000000..d7d8ee2 --- /dev/null +++ b/css/ddsmoothmenu-v.css @@ -0,0 +1,58 @@ +.ddsmoothmenu-v{ +display: none; +} + +.ddsmoothmenu-v ul{ +margin: 0; +padding: 0; +width: 170px; /* Main Menu Item widths */ +list-style-type: none; +font: bold 12px Verdana; +} + +.ddsmoothmenu-v ul li{ +position: relative; +float: none; +} + +/* Top level menu links style */ +.ddsmoothmenu-v ul li a{ +display: block; +overflow: auto; /*force hasLayout in IE7 */ +color: white; +text-decoration: none; +padding: 6px 23px 6px 6px; +border-bottom: 1px solid #778; +border-right: 1px solid #778; +} + +.ddsmoothmenu-v ul li a:link, .ddsmoothmenu-v ul li a:visited, .ddsmoothmenu-v ul li a:active{ +background: #1c5a80; /*background of menu items (default state)*/ +color: white; +} + + +.ddsmoothmenu-v ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/ +background: lightblue !important; +color: navy; +} + +.ddsmoothmenu-v ul li a:hover{ +background: lightblue; /*background of menu items during onmouseover (hover state)*/ +color: navy; +} + +/*Sub level menu items */ +.ddsmoothmenu-v ul li ul{ +position: absolute; +width: 170px; /*Sub Menu Items width */ +top: 0; +font-weight: normal; +visibility: hidden; +} + + +/* Holly Hack for IE \*/ +* html .ddsmoothmenu-v ul li { float: left; height: 1%; } +* html .ddsmoothmenu-v ul li a { height: 1%; } +/* End */ \ No newline at end of file diff --git a/css/ddsmoothmenu.css b/css/ddsmoothmenu.css new file mode 100644 index 0000000..7da8982 --- /dev/null +++ b/css/ddsmoothmenu.css @@ -0,0 +1,290 @@ +.ddsmoothmenu{ +font: bold 12px Verdana; +background: #414141; /*background of menu bar (default state)*/ +width: 100%; +display: none; +} + +.ddsmoothmenu ul{ +z-index:100; +margin: 0; +padding: 0; +list-style-type: none; +} + +/*Top level list items*/ +.ddsmoothmenu ul li{ +position: relative; +display: inline; +float: left; +} + +/*Top level menu link items style*/ +.ddsmoothmenu ul li a{ +display: block; +background: #414141; /*background of menu items (default state)*/ +color: white; +padding: 8px 10px; +border-right: 1px solid #778; +color: #2d2b2b; +text-decoration: none; +} + +* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/ +display: inline-block; +} + +.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{ +color: white; +} + +.ddsmoothmenu ul li a.selected { /*CSS class that's dynamically added to the currently active menu items' LI A element*/ +background: black ; +color: white; +} + +.ddsmoothmenu ul li a:hover{ +background: black; /*background of menu items during onmouseover (hover state)*/ +color: white; +} + +/* sub menus */ +.ddsmoothmenu ul li ul{ +position: absolute; +left: -3000px; +display: none; /*collapse all sub menus to begin with*/ +visibility: hidden; +} + +/*Sub level menu list items (alters style from Top level List Items)*/ +.ddsmoothmenu ul li ul li{ +display: list-item; +float: none; +} + +/*All subsequent sub menu levels vertical offset after 1st level sub menu */ +.ddsmoothmenu ul li ul li ul{ +top: 0; +} + +/* Sub level menu links style */ +.ddsmoothmenu ul li ul li a{ +font: normal 13px Verdana; +width: 160px; /*width of sub menus*/ +padding: 5px; +margin: 0; +border-top-width: 0; +border-bottom: 1px solid gray; +} + +/* Holly Hack for IE \*/ +* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/ + + +/* ######### CSS classes applied to down and right arrow images ######### */ + +.downarrowclass{ +position: absolute; +top: 12px; +right: 7px; +} + +.rightarrowclass{ +position: absolute; +top: 6px; +right: 5px; +} + +.leftarrowclass{ +margin-right: 5px; +} + +/* ######### CSS for shadow added to sub menus ######### */ + +.ddshadow{ +position: absolute; +left: 0; +top: 0; +width: 0; +height: 0; +background-color: #ccc; /* generally should be just a little lighter than the box-shadow color for CSS3 capable browsers */ +} + +.toplevelshadow{ +margin: 5px 0 0 5px; /* in NON CSS3 capable browsers gives the offset of the shadow */ +opacity: 0.8; /* shadow opacity mostly for NON CSS3 capable browsers. Doesn't work in IE */ +} + +.ddcss3support .ddshadow.toplevelshadow { +margin: 0; /* in CSS3 capable browsers overrides offset from NON CSS3 capable browsers, allowing the box-shadow values in the next selector to govern that */ +/* opacity: 1; */ /* optionally uncomment this to remove partial opacity for browsers supporting a box-shadow property which has its own slight gradient opacity */ +} + +.ddcss3support .ddshadow { +background-color: transparent; +box-shadow: 5px 5px 5px #aaa; /* box-shadow color generally should be a little darker than that for the NON CSS3 capable browsers background-color */ +-moz-box-shadow: 5px 5px 5px #aaa; +-webkit-box-shadow: 5px 5px 5px #aaa; +} + +/* ######### Mobile menu container CSS ######### */ + +div.ddsmoothmobile{ /* main mobile menu container */ +background: #414141; +color: white; +position: fixed; +top: 0; +left: 0; +width: 200px; /* width of mobile menu */ +height: 300px; +overflow: hidden; +visibility: hidden; +border-radius: 0 0 10px 0; +box-shadow: 0 0 10px gray; +} + +div.ddsmoothmobile a{ +color: white; +text-decoration: none; +} + +div.ddsmoothmobile div.topulsdiv{ /* Single DIV that surrounds all top level ULs before being flattened, or the ULs on the "frontpage" of the menu */ +position: relative; +background: #414141; +overflow-y: auto; +width: 100%; +height: 100%; +} + + +div.ddsmoothmobile ul{ /* style for all ULs in general inside mobile menu */ +list-style: none; +width: 100%; +top: 0; +left: 0; +background: #414141; +margin: 0; +padding: 0; +} + +div.ddsmoothmobile div.topulsdiv ul.submenu{ /* top level ULs style */ +} + + +div.ddsmoothmobile ul.submenu{ /* sub level ULs style */ +position: absolute; +height: 100%; +overflow-y: auto; +} + +div.ddsmoothmobile ul li{ +border-bottom: 1px solid gray; +position: relative; +font-weight: bold; +} + +div.ddsmoothmobile ul li.breadcrumb{ /* breadcrumb LI that's added to the top of every sub level UL */ +cursor: pointer; +padding: 10px; +background: black; +} + +div.ddsmoothmobile ul li a{ +display: block; +padding: 6px; +} + +div.ddsmoothmobile ul li a:hover{ +background: black; +} + +/* ############# Animated Drawer icon (mobile menu toggler) CSS ############# */ + +.animateddrawer{ + font-size: 10px; /* Base font size. Adjust this value to modify size of drawer icon */ + width: 3em; + height: 2.8em; + outline: none; + position: fixed; /* BY default, make toggler fixed on screen */ + display: none; + top: 10px; /* Position at upper right corner */ + right: 10px; + background: white; + z-index: 1000; +} + +.animateddrawer:before, .animateddrawer:after{ + position: absolute; + content: ''; + display: block; + width: 100%; + height: 0.6em; /* height of top and bottom drawer line */ + background: black; + border-radius: 2px; + top: 0; + left: 0; + opacity: 1; + -webkit-transition: all 0.3s ease-in; /* set transition type and time */ + transition: all 0.3s ease-in; +} + +.animateddrawer:after{ + top: auto; + bottom: 0; +} + +.animateddrawer span{ + width: 100%; + height: 0.6em; /* height of middle drawer line */ + background: black; + position: absolute; + top: 50%; + margin-top: -0.3em; /* set this to - half of middle drawer line height */ + border-radius: 2px; + -ms-transform-origin: 50% 50%; + -webkit-transform-origin: 50% 50%; + transform-origin: 50% 50%; + -webkit-transition: all 0.3s ease-in 0.3s; /* set transition type and time */ + transition: all 0.3s ease-in 0.3s; +} + +.animateddrawer span::after{ + content: ''; + display: block; + width: 100%; + height: 0.6em; /* height of middle drawer line */ + background: black; + border-radius: 2px; + position: absolute; + -ms-transform-origin: 50% 50%; + -webkit-transform-origin: 50% 50%; + transform-origin: 50% 50%; + -webkit-transition: all 0.3s ease-in 0.3s; /* set transition type and time */ + transition: all 0.3s ease-in 0.3s; +} + +.animateddrawer.open{ +} + +.animateddrawer.open:before{ /* style when .open class is added to button */ + top: 50%; + margin-top: -0.3em; /* set this to - half of top drawer line height */ + opacity: 0; +} + +.animateddrawer.open:after{ /* style when .open class is added to button */ + bottom: 50%; + opacity: 0; +} + +.animateddrawer.open span{ /* style when .open class is added to button */ + -ms-transform: rotate(-45deg); + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); +} + +.animateddrawer.open span:after{ /* style when .open class is added to button */ + -ms-transform: rotate(-90deg); + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); +} diff --git a/css/ecommerce_styles.css b/css/ecommerce_styles.css new file mode 100644 index 0000000..a184395 --- /dev/null +++ b/css/ecommerce_styles.css @@ -0,0 +1,1332 @@ +@charset "utf-8"; +/*Fonts =============================== */ +@font-face { + font-family: 'Roboto'; + font-style: normal; + src: url('../assets/fonts/Roboto-Bold.ttf'); + src: url('../assets/fonts/Roboto-Medium.ttf'); + src: url('../assets/fonts/Roboto-Regular.ttf'); + +} +@font-face { + font-family: 'Gotham'; + font-style: normal; + src: url('../assets/fonts/GothamMedium.ttf'); + + +} +/*common styles ===============================*/ +body { + margin: 0px; + padding: 0px; + background-color: #202020; + font-family: 'Roboto'; +} +ul { + margin: 0px; + padding: 0px; +} +hr { + box-sizing: border-box; + padding: 0px; + margin-top: 10px; + width: 100%; + border-color: #5BB1DF; +} +h1,h2,h3,h4 { + padding: 0px; + margin: 0px; +} +select { + cursor: pointer; +} +select::-ms-expand { + display: none; +} +address { + font-style: normal; +} +button { + cursor: pointer; +} +.item { + text-decoration: none; +} +.stars { + display: flex; + justify-content: space-between; + width: 90px; + margin-bottom: 5px; +} +/* Layout ===============================*/ +.wrapper { + max-width: 1920px; + background-color: #fff; +} +/* Buttons ===============================*/ +/* Deals Of The Days Buttons =============================== */ +.sale_boxes_item_cart_add { + font-family: 'Gotham'; + display: flex; + align-items: center; + border: 1px solid #ccc; + padding: 0px 0px 0px 0px; + width: 150px; + background-color: inherit; + font-size: 11.5px; + line-height: 33px; + font-weight: 100; + text-transform: uppercase; + letter-spacing: 0.01em; + color: #484f5b; +} +.sale_boxes_item_cart_add:hover { + background-color: #F6BD32; +} +.sale_boxes_item_cart_favorite { + display: flex; + justify-content: space-around; + align-items: center; + border: 1px solid #ccc; + padding: 0px 0px 0px 0px; + width: 37px; + background-color: inherit; + font-size: 11.5px; + line-height: 33px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.01em; + color: #484f5b; +} +.sale_boxes_item_cart_favorite:hover { + background-color: #F6BD32; +} +.sale_boxes_item_cart_info { + display: flex; + justify-content: space-around; + align-items: center; + border: 1px solid #ccc; + padding: 0px 0px 0px 0px; + width: 37px; + background-color: inherit; + font-size: 11.5px; + line-height: 33px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.01em; + color: #484f5b; +} +.sale_boxes_item_cart_info:hover { + background-color: #F6BD32; +} +/* Small Product card Buttons =============================== */ +.small_product_card_cart_add { + font-family: 'Gotham'; + display: flex; + align-items: center; + border: 1px solid #ccc; + padding: 0px 0px 0px 0px; + width: 125px; + background-color: inherit; + font-size: 11.5px; + line-height: 33px; + font-weight: 100; + text-transform: uppercase; + letter-spacing: 0.01em; + color: #484f5b; + +} +.small_product_card_cart_add:hover { + background-color: #F6BD32; +} +.small_product_card_favorite { + display: flex; + justify-content: space-around; + align-items: center; + border: 1px solid #ccc; + padding: 0px 0px 0px 0px; + width: 34px; + background-color: inherit; + font-size: 11.5px; + line-height: 33px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.01em; + color: #484f5b; +} +.small_product_card_favorite:hover { + background-color: #F6BD32; +} +.small_product_card_cart_info { + display: flex; + justify-content: space-around; + align-items: center; + border: 1px solid #ccc; + padding: 0px 0px 0px 0px; + width: 34px; + background-color: inherit; + font-size: 11.5px; + line-height: 33px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.01em; + color: #484f5b;} +.small_product_card_cart_info:hover { + background-color: #F6BD32; +} +.small_product_card_cart_add img { + margin-right: 5px; + margin-left: 10px; +} +/* Header =============================== */ +.logo { + background-color: #2485B8; +} +.main_logo { + font-size: 30px; +} +.logo h1 { + margin: 0px; + margin-left: 80px; + padding-top: 10px; + padding-bottom: 0px; + line-height: 13px; +} +.logo h4 { + margin: 0px; + margin-left: 100px; + padding-top: 0px; + padding-bottom: 5px; + font-size: 12px +} +.main_header { + background-color: #2485B8; +} +.login_line { + display: flex; + justify-content: space-between; + padding-top: 10px; + max-width: 1220px; + margin-left: auto; + margin-right: auto; +} +.login_line a { + color: white; + padding-bottom: 2px; + padding-top: 2px; + padding-right: 10px; + text-decoration: none; + border-right: 1px solid #ccc; +} +.login_line a:hover { + color: #F6BD32; +} +.login_line li:hover { + color: #F6BD32; +} +.login_line li:nth-of-type(2) { + border: none; +} +.login_line { + color: white; +} +.languge_menu { + display: flex; + width: 240px; + list-style: none; +} +.languge_menu li { + padding-right: 15px; + border-right: 1px solid white; +} +.languge_menu span { + font-size: 10px; +} +.currency_select { + padding-left: 13px; + background-color: #2485B8; + color: white; + appearance: none; + border: none; +} +.currency_select:hover { + color: #F6BD32; +} +.currency_select option { + background-color: white; + color: black; +} +.language_select { + padding-left: 13px; + background-color: #2485B8; + color: white; + appearance: none; + border: none; +} +.language_select:hover { + color: #F6BD32; +} +.language_select option { + background-color: white; + color: black; +} +.account_menu { + display: flex; + width: 460px; + list-style: none; + justify-content: space-around; + font-size: 14px; +} +.account_menu li { + position: relative; +} + +.account_menu span { + font-size: 11px; +} +.account_menu li:last-child a { + border: none; +} + + +/* Account menu =============================== */ +.account_menu .ddsmoothmenu{ + font-family: 'Roboto'; + position: relative; + font-size: 14px; + height: 21px; + background: #2485B8; + display: none; + font-weight: 200; + border-right: 1px solid #ccc; + z-index:1100; +} +.account_menu .ddsmoothmenu ul{ + display: flex; + justify-content: space-around; + margin: 0; + padding: 0; + list-style-type: none; +} + +/*Top level list items*/ +.account_menu .ddsmoothmenu ul li{ + position: relative; + display: inline; + padding: 0px; +} + +/*Top level menu link items style*/ +.account_menu .ddsmoothmenu ul li a{ + display: block; + height: 17px; + background: #2485B8; /*background of menu items (default state)*/ + color: white; + padding-top: 0px; + padding-bottom: 2px; + border-right: none; + text-decoration: none; +} + +* html .account_menu .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/ + display: inline-block; +} +.account_menu .ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{ + color: white; +} +.account_menu .ddsmoothmenu ul li a.selected { /*CSS class that's dynamically added to the currently active menu items' LI A element*/ + background: #2485B8 ; + color: #F6BD32; +} +.account_menu .ddsmoothmenu ul li a:hover{ + background: #2485B8; /*background of menu items during onmouseover (hover state)*/ + color: F6BD32; +} + +/* sub menus */ +.account_menu .ddsmoothmenu ul li ul{ + position: absolute; + left: -3000px; + display: none; /*collapse all sub menus to begin with*/ + visibility: hidden; + text-transform: none; +} +/*Sub level menu list items (alters style from Top level List Items)*/ +.account_menu .ddsmoothmenu ul li ul li{ + display: list-item; + float: none; + text-transform: none; +} + +/*All subsequent sub menu levels vertical offset after 1st level sub menu */ +.account_menu .ddsmoothmenu ul li ul li ul{ + top: 0; +} + +/* Sub level menu links style */ +.account_menu .ddsmoothmenu ul li ul li a{ + font: normal 13px Roboto; + width: 160px; /*width of sub menus*/ + padding: 5px; + margin: 0; + border-top-width: 0; + /* border-bottom: 1px solid white; */ + background: #195e80 ; /*background of menu items */ + color: white; + box-shadow: 0 3px 5px #195e80 ; + +} +.account_menu .ddsmoothmenu ul li ul li a:hover { + /* font: normal 14px Roboto; */ + background: #154d6a; /*background of menu items during onmouseover (hover state)*/ + color: #F6BD32; + box-shadow: 0 0px 5px #154d6a; + text-decoration: underline; +} +.account_menu .ddsmoothmenu ul li ul li a:selected; { + background: blue !important; /*background of menu items during onmouseover (hover state)*/ + color: white; +} + +/* Holly Hack for IE \*/ +* html .account_menu .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/ + + +/* ######### CSS classes applied to down and right arrow images ######### */ + +.account_menu .downarrowclass{ + position: absolute; + top: 4px; + right: 7px; +} +.account_menu .rightarrowclass{ + position: absolute; + top: 6px; + right: 5px; +} +.account_menu .leftarrowclass{ + margin-right: 5px; +} + +/* ######### CSS for shadow added to sub menus ######### */ + +.account_menu .ddshadow{ + position: absolute; + left: 0; + top: 0; + width: 0; + height: 0; + background-color: #ccc; /* generally should be just a little lighter than the box-shadow color for CSS3 capable browsers */ +} + +.account_menu .toplevelshadow{ + margin: 5px 0 0 5px; /* in NON CSS3 capable browsers gives the offset of the shadow */ + opacity: 0.8; /* shadow opacity mostly for NON CSS3 capable browsers. Doesn't work in IE */ +} + +.account_menu .ddcss3support .ddshadow.toplevelshadow { + margin: 0; /* in CSS3 capable browsers overrides offset from NON CSS3 capable browsers, allowing the box-shadow values in the next selector to govern that */ +/* opacity: 1; */ /* optionally uncomment this to remove partial opacity for browsers supporting a box-shadow property which has its own slight gradient opacity */ +} +.account_menu .ddcss3support .ddshadow { + background-color: transparent; + box-shadow: 5px 5px 5px #aaa; /* box-shadow color generally should be a little darker than that for the NON CSS3 capable browsers background-color */ + -moz-box-shadow: 5px 5px 5px #aaa; + -webkit-box-shadow: 5px 5px 5px #aaa; +} + +.wish_link::before { + content: url("../assets/images/header/heart_header.png"); + position: absolute; + top: 1px; + left: -25px; +} +.wish_link:hover::before { + content: url("../assets/images/header/heart_header_hover.png"); +} +.check_link::before { + content: url("../assets/images/header/checkbox.png"); + position: absolute; + top: 1px; + left: -23px; +} +.check_link:hover::before { + content: url("../assets/images/header/checkbox_hover.png"); +} +.log_link::before { + content: url("../assets/images/header/login.png"); + position: absolute; + + left: -22px; +} +.log_link:hover::before { + content: url("../assets/images/header/login_hover.png"); +} +/* Search'n'Cart ===============================*/ +.search_n_cart { + width: 1220px; + margin-left: auto; + margin-top: 50px; + margin-bottom: 50px; +} +.search_n_cart_content { + width: 870px; + display: flex; + justify-content: space-between +} +.search_box { + display: flex; + height: 40px; +} +.search_box input { + width: 272px; + padding: 13px; + border: none; +} +.search_box span { + background-color: white; +} +.search_box button { + width: 45px; + border: none; + background-color: red; +} +.select_all_categories { + padding-left: 13px; + padding-right: 23px; + width: 100%; + height: 100%; + appearance: none; + border: none; + color: #666; +} +.select_all_categories opton:nth-of-type(2)::before { + content: '65'; +} +.select_all_categories_content { + position: relative; + border-right: 1px solid #aaa; + color: #111; +} +.select_all_categories_content::after { + content: "▼"; + font-size: 11px; + position: absolute; + bottom:12px; + right: 10px; + color: gray; +} +.cart { + width: 150px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background-color: #aaa; + color: #eee; + font-size: 14px; + text-decoration: none; +} +.cart:hover { + text-decoration: underline; +} +.cart_caption { + text-transform: uppercase; + font-size: 13px; +} +/* Main menu ===============================*/ +.main_menus_block { + display: flex; + align-items: flex-end; + max-width: 1220px; + margin-left: auto; + margin-right: auto; + padding-bottom: 10px; + list-style: none; + justify-content: space-between; +} +.main_all_categories { + width: 270px; + background-color: #F6BD32; + border: 0; + padding: 8px 10px 8px 10px; + text-align: center; + font-size: 20.9px; + line-height: 33px; + font-weight: 700; + letter-spacing: 0.01em; + color: #000; + text-decoration:none; +} +.main_all_categories:hover { + color: #000; + background-color: #E09F0A; +} +.main_all_categories_content { + width: 100%; + display: flex; + align-items: center; + justify-content: space-around; +} +.main_all_categories_content span { + font-family: 'Gotham'; + font-weight: 1; + font-size: 20px; + text-transform: none; +} +.simbols_all_categories { + transform: rotate(90deg); + +} +.menu_new { + position: absolute; + bottom: 80%; + left: 45%; + width: 43px; + height: 32px; + background-image: url("../assets/images/header/menu_new.png"); + z-index: 5001; + pointer-events: none; +} +.menu_new:hover { + position: absolute; + bottom: 80%; + left: 45%; + width: 43px; + height: 32px; + background-image: url("../assets/images/header/menu_count.png"); +} +.menu_new span { + display: block; + text-align: center; + color: white; + width: 70%; + font: normal 12px Verdana; + margin: auto; + margin-top: 3px; +} +.menu_count { + position: absolute; + bottom: 80%; + left: 45%; + width: 43px; + height: 32px; + background-image: url("../assets/images/header/menu_count.png"); + pointer-events: none; +} +.menu_count span { + display: block; + text-align: center; + color: white; + width: 70%; + font: normal 12px Verdana; + margin: auto; + margin-top: 3px; +} +.main_menus_block .ddsmoothmenu{ + font: bold 12px Verdana; + background: #2485B8; + width: 600px; + display: none; +} +.main_menus_block .ddsmoothmenu ul{ + display: flex; + justify-content: space-around; + z-index:100; + margin: 0; + padding: 0; + list-style-type: none; + text-transform: uppercase; + font: normal 15px Verdana; +} + +/*Top level list items*/ +.main_menus_block .ddsmoothmenu ul li{ + position: relative; + display: inline; + +/* float: left; */ +} + +/*Top level menu link items style*/ +.main_menus_block .ddsmoothmenu ul li a{ + display: block; + background: #2485B8; /*background of menu items (default state)*/ + color: white; + padding: 8px 10px; + border-right: none; + text-decoration: none; +} +* html .main_menus_block .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/ + display: inline-block; +} +.main_menus_block .ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{ + color: white; +} +.main_menus_block .ddsmoothmenu ul li a.selected { /*CSS class that's dynamically added to the currently active menu items' LI A element*/ + background: #2485B8 ; + color: #F6BD32; +} +.main_menus_block .ddsmoothmenu ul li a:hover{ + background: #2485B8; /*background of menu items during onmouseover (hover state)*/ + color: F6BD32; +} + +/* sub menus */ +.main_menus_block .ddsmoothmenu ul li ul{ + position: absolute; + left: -3000px; + display: none; /*collapse all sub menus to begin with*/ + visibility: hidden; + text-transform: none; +} +.main_menus_block .ddsmoothmenu ul li ul li a:hover { + background: #18587A; /*background of menu items during onmouseover (hover state)*/ + color: white; +} +.main_menus_block .ddsmoothmenu ul li ul li a:selected; { + background: #18587A !important; /*background of menu items during onmouseover (hover state)*/ + color: white; +} + +/*Sub level menu list items (alters style from Top level List Items)*/ +.main_menus_block .ddsmoothmenu ul li ul li{ + display: list-item; + float: none; + text-transform: none; +} + +/*All subsequent sub menu levels vertical offset after 1st level sub menu */ +.main_menus_block .ddsmoothmenu ul li ul li ul{ + top: 0; +} + +/* Sub level menu links style */ +.main_menus_block .ddsmoothmenu ul li ul li a{ + font: normal 13px Verdana; + width: 160px; /*width of sub menus*/ + padding: 5px; + margin: 0; + border-top-width: 0; + border-bottom: 1px solid black; +} + +/* Holly Hack for IE \*/ +* html .main_menus_block .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/ + + +/* ######### CSS classes applied to down and right arrow images ######### */ + +.main_menus_block .downarrowclass{ + position: absolute; + top: 12px; + right: 7px; +} + +.main_menus_block .rightarrowclass{ + position: absolute; + top: 6px; + right: 5px; +} + +.main_menus_block .leftarrowclass{ + margin-right: 5px; +} + +/* ######### CSS for shadow added to sub menus ######### */ + +.main_menus_block .ddshadow{ + position: absolute; + left: 0; + top: 0; + width: 0; + height: 0; + background-color: #ccc; /* generally should be just a little lighter than the box-shadow color for CSS3 capable browsers */ +} +.main_menus_block .toplevelshadow{ + margin: 5px 0 0 5px; /* in NON CSS3 capable browsers gives the offset of the shadow */ + opacity: 0.8; /* shadow opacity mostly for NON CSS3 capable browsers. Doesn't work in IE */ +} +.main_menus_block .ddcss3support .ddshadow.toplevelshadow { + margin: 0; /* in CSS3 capable browsers overrides offset from NON CSS3 capable browsers, allowing the box-shadow values in the next selector to govern that */ +/* opacity: 1; */ /* optionally uncomment this to remove partial opacity for browsers supporting a box-shadow property which has its own slight gradient opacity */ +} +.main_menus_block .ddcss3support .ddshadow { + background-color: transparent; + box-shadow: 5px 5px 5px #aaa; /* box-shadow color generally should be a little darker than that for the NON CSS3 capable browsers background-color */ + -moz-box-shadow: 5px 5px 5px #aaa; + -webkit-box-shadow: 5px 5px 5px #aaa; +} +.banner img { + width: 100%; +} +/* Home page header ===============================*/ +.go_quickly { + background-color: #444540; +} +.go_quickly_content { + display: flex; + justify-content: space-around; + width: 880px; + margin-left: auto; + margin-right: auto; + padding-bottom: 16px; + padding-top: 21px; + font-size: 14px; +} +.go_quickly_content span { + color: #F6BD32; +} +.go_quickly_menu { + display: flex; + width: 750px; + list-style: none; + justify-content: space-around; +} +.go_quickly a { + text-decoration: none; + color: #aaa; +} +.go_quickly a:hover { + text-decoration: underline; + color: #eee; +} + +/* Banner =============================== */ +.banner { + width: 100%; +} +.banner .slick-prev, +.banner .slick-next { + height: 80px; +} +.banner .slick-prev { + left: 120px; +} +.banner .slick-next { + right: 190px; +} +.banner .slick-prev:before { + content: url("../assets/images/header/left_arrow.png"); +} +.banner .slick-next:before { + content: url("../assets/images/header/right_arrow.png"); +} +/* Advantages =============================== */ +.advantages { + background-color: #E6E7E8; +} +.advantages_content { + padding-bottom: 20px; + padding-top: 20px; +} +.advantages_menu { + display: flex; width: 1100px; + margin-left: auto; + margin-right: auto; + list-style: none; + justify-content: space-around; +} +.advantages_menu a { + text-decoration: none; + text-transform: uppercase; + padding-left: 33px; + color: black; + font-weight: 800; +} +.advantages_menu a:hover { + text-decoration: underline; +} +.advantages_menu li { + border-left: 2px solid #aaa; + padding-bottom: 3px; + padding-top: 3px; +} +.advantages_menu li:nth-of-type(1) { + border-left: none; +} +/* Main ===============================*/ +main { + width: 1220px; + background-color: white; + margin-left: auto; + margin-right: auto; +} +.main_content { + width: 100%; + margin-left: auto; + margin-right: auto; +} +/* Deals Of The Days ===============================*/ +.sale_boxes { + display: flex; + justify-content: space-between; + padding-top: 40px; + padding-bottom: 40px; +} +.sale_boxes_item { + position: relative; + width: 600px; + height: 437px; + background-color: #ffffff; + box-shadow: 2px 4px 19px 0px rgba(157,157,157,0.37); +} +.sale_ribbon { + position: absolute; + left: 487px; + bottom: 335px; +} +.sale_boxes_item_content { + display: flex; +} +.sale_boxes_item_img { + position: relative; +} +.sale_20percent { + position: absolute; + left: 20px; + bottom: 280px; +} +.sale_boxes_item h3 { + font-size: 24px; + line-height: 14px; + font-weight: 600; + color: #1f1f1f; + padding-bottom: 40px; + padding-top: 50px; + padding-left: 20px; +} +.sale_boxes_item h4 { + font-size: 24px; + line-height: 14px; + font-weight: 500; + color: #1f1f1f; + padding-bottom: 15px; +} +.sale_boxes_item p { + font-size: 15px; + line-height: 24px; + font-weight: 400; + color: #424040; +} +.sale_boxes_item_text { + width: 240px; +} +.sale_boxes_item_price { + font-size: 26.4px; + line-height: 24px; + font-weight: 400; + color: #f73b48; +} +.sale_boxes_item_old_price { + font-size: 18.1px; + text-decoration: line-through; + color: #504f4f; +} +.sale_boxes_item_cart { + display: flex; + justify-content: space-between; + margin-top: 15px; +} +.sale_boxes_item_cart_add img { + margin-right: 5px; + margin-left: 10px; +} +/* Featured Products =============================== */ +.sale_boxes_2items { + position: relative; + width: 570px; + height: 437px; + background-color: #ffffff; + box-shadow: 2px 4px 19px 0px rgba(157,157,157,0.37); +} +.sale_boxes_2items_sale_ribbon { + position: absolute; + left: 455px; + bottom: 335px; +} +.sale_boxes_2items_items_set { + display: flex; + justify-content: space-around; + width: 90%; + margin-left: auto; + margin-right: auto; +} +.sale_boxes_2items h3 { + font-size: 24px; + line-height: 14px; + font-weight: 400; + color: #0a0909; + padding-bottom: 35px; + padding-top: 35px; + padding-left: 20px; +} +.sale_boxes_2items h4 { + font-size: 20px; + line-height: 24px; + font-weight: 400; + color: #0b0909; +} +.sale_20percent_sale_boxes_2items { + position: absolute; + right: 205px; + bottom: 265px; +} +/* Small product card =============================== */ +.small_product_card { + display: flex; + flex-direction: column; + width: 220px; + position: relative; +} +.product_img { + padding-bottom: 40px; +} +.small_product_card_text { + padding-left: 5px; +} +.small_product_card_text h4 { + margin-bottom: 15px; + font-size: 22px; + line-height: 24px; + font-weight: 400; + color: #111010; +} +.small_product_card_price { + font-size: 20.3px; + line-height: 19px; + font-weight: 400; + color: #f73b48; +} +.small_product_card_old_price { + font-size: 11.3px; + text-decoration: line-through; + color: #0d0c0d; +} +.small_product_card_cart { + display: flex; + width: 210px; + justify-content: space-between; + margin-top: 15px; +} +/* Carusel with dots ===============================*/ +.sale_carusel_nav_dots { + width: 100%; + height: 437px; + background-color: #ffffff; + box-shadow: 2px 4px 19px 0px rgba(157,157,157,0.37); +} +.sale_carusel_nav_dots_set { + display: flex; + margin-left: auto; + margin-right: auto; + padding-top: 30px; +} +.sale_carusel_nav_dots_set .slick-dots li button:before { + font-size: 18px; +} +.sale_carusel_nav_dots_set .slick-dots li.slick-active button:before +{ + color: red; +} +.sale_carusel_nav_dots_item { + width: 271px; + margin-bottom: 30px; + margin-top: 30px; + margin-left: 20px; + margin-right: 30px; + box-shadow: 2px 4px 19px 0px rgba(157,157,157,0.37); +} +.sale_carusel_nav_dots_item:hover { + box-shadow: 0px 0px 16px 5px #ccc; +} +.sale_carusel_nav_dots_item h3 { + padding-bottom: 15px; + padding-top: 15px; + font-size: 16px; + line-height: 14px; + font-weight: 400; + color: #0a0909; + text-transform: uppercase; + text-align: center; + background-color: #fff; +} +/* Carusel electronics =============================== */ +.sale_carusel_electronics { + display: flex; + justify-content: space-between; + width: 100%; + margin-top: 40px; + background-color: #ffffff; + box-shadow: 2px 4px 19px 0px rgba(157,157,157,0.37); +} +.electronics { + height: 417px; + justify-content: flex-end; + padding-bottom: 20px; + border: 1px solid white; +} +.electronics:hover { + border: 1px solid #ccc; +} +.new { + position: absolute; + left: 100px; + bottom: 330px; +} +/* Carusel clothes =============================== */ +.clothes_slider { + display: flex; + width: 100%; + height: 439px; + margin-top: 40px; + background-color: #ffffff; + box-shadow: 2px 4px 19px 0px rgba(157,157,157,0.37); +} +.carousel_head_img { + width: 296px; + height: 418px; +} +.sale_carusel_clothes { + display: flex; + justify-content: space-between; + /* margin-left: auto; */ + /* margin-right: auto; */ + width: 924px; + +} +.clothes { + justify-content: flex-end; + height: 417px; + padding-bottom: 20px; + border: 1px solid white; +} +.clothes:hover { + border: 1px solid #ccc; +} + +/* Two items boxes =============================== */ +.two_items_boxes { + display: flex; + justify-content: space-between; + padding-top: 40px; + padding-bottom: 40px; +} + +/* Two fotos box =============================== */ +.two_foto_box { + display: flex; + justify-content: space-around; + width: 593px; + height: 374px; + box-shadow: 2px 4px 19px 0px rgba(157,157,157,0.37); +} +.two_foto_box_item { + padding-top: 20px; +} +.two_foto_box_item h3{ + font-size: 25px; + padding-top:22px; + line-height: 24px; + font-weight: 400; + color: #2b2b2b; +} +/* Two items box =============================== */ +.two_item_box { + display: flex; + justify-content: space-around; + width: 593px; + height: 354px; + box-shadow: 2px 4px 19px 0px rgba(157,157,157,0.37); + padding-bottom: 20px; +} +.two_items_box { + justify-content: flex-end; +} +/* Footer =============================== */ +footer { + background-color: #2385b8; + margin-top: 120px; + color: #cce4f0; +} +.socials_container { + position: relative; + width: 1220px; + margin-left: auto; + margin-right: auto; + color: white; +} +/* Socials =============================== */ +.footer_socials { + position: absolute; + top: -86px; + width: 100%; + height: 173px; + background-color: #32a3dd; + box-shadow: 2px 4px 19px 0px rgba(157,157,157,0.37); + border-radius: 30px; +} +.social_content { + display: flex; + align-items: center; + justify-content: space-around; + width: 90%; + margin-left: auto; + margin-right: auto; + height: 100%; +} +.socials_newsletter { + display: flex; + align-items: center; +} +.socials_newsletter a { + opacity: 1.0; + transition: 0.5s; +} +.socials_newsletter a:hover { + opacity: 0.6; +} +.newsletter_text { + padding-left: 20px; + font-size: 14px; +} +.newsletter_text span { + display: block; +} +.newsletter_text span:first-child { + text-transform: uppercase; + padding-bottom: 7px; +} +.socials_search { + display: flex; +} +.socials_search input { + width: 272px; + padding: 13px; + border: none; + text-transform: uppercase; +} +.socials_search button { + width: 55px; + border: none; + background-color: red; +} +.socials_links { + width: 150px; + display: flex; + justify-content: space-around; + list-style: none; +} +.socials_links a { + opacity: 0.9; + transition: 0.5s; +} +.socials_links a:hover { + opacity: 0.6; +} +/* About =============================== */ +.about { + display: flex; + justify-content: space-between; + padding-top: 176px; + width: 1220px; + font-size: 14px; + line-height: 25px; + font-weight: 100; + margin-left: auto; + margin-right: auto; +} +.about h3 { + text-transform: uppercase; + font-size: 19px; + font-weight: 400; + color: white; +} +.about_shop { + flex-basis:300px; +} +.about_info { + flex-basis:200px; +} +.about_info_links { + list-style: none; +} +.about_info_links li { + line-height: 20px; +} +.about_info_links a { + text-decoration: none; + color: inherit; +} +.about_info_links a:hover { + color: white; + text-decoration: underline; +} +.about_services { + flex-basis:200px; +} +.about_services li { + line-height: 20px; +} +.about_services a { + text-decoration: none; + color: inherit; +} +.about_services a:hover { + color: white; + text-decoration: underline; +} +.about_services_links { + list-style: none; +} +.about_contact { + flex-basis:300px; +} +.hr_footer { + margin-top: 40px; + margin-bottom: 30px; +} +/* Footer product links =============================== */ +.products_links { + width: 1000px; + margin-left: auto; + margin-right: auto; + padding-bottom: 35px; +} +.products_links_items { + display: flex; + flex-wrap: wrap; + justify-content: center; + list-style: none; + +} +.products_links_items a { + text-decoration: none; + color: inherit; + padding-left: 5px; + padding-right: 5px; + border-right: 1px solid #dfe0e1; + font-size: 14px; + line-height: 18px; + font-weight: 400; +} +.products_links_items a:hover { + text-decoration: underline; + color: white; +} +.credits { + width: 20%; + margin-top: 30px; + margin-left: auto; + margin-right: auto; + font-size: 12px; +} +.credits a { + color: white; +} +.credits a:hover { + color: yellow; +} + + + diff --git a/css/fonts/slick.eot b/css/fonts/slick.eot new file mode 100644 index 0000000..2cbab9c Binary files /dev/null and b/css/fonts/slick.eot differ diff --git a/css/fonts/slick.svg b/css/fonts/slick.svg new file mode 100644 index 0000000..b36a66a --- /dev/null +++ b/css/fonts/slick.svg @@ -0,0 +1,14 @@ + + + +Generated by Fontastic.me + + + + + + + + + + diff --git a/css/fonts/slick.ttf b/css/fonts/slick.ttf new file mode 100644 index 0000000..9d03461 Binary files /dev/null and b/css/fonts/slick.ttf differ diff --git a/css/fonts/slick.woff b/css/fonts/slick.woff new file mode 100644 index 0000000..8ee9972 Binary files /dev/null and b/css/fonts/slick.woff differ diff --git a/css/megadroplinemenu_ecomm.css b/css/megadroplinemenu_ecomm.css new file mode 100644 index 0000000..040b91f --- /dev/null +++ b/css/megadroplinemenu_ecomm.css @@ -0,0 +1,333 @@ +#megadroplinemenu { + font: bold 16px 'Bitter', sans-serif; + /* use Google font */ + position: relative; + z-index: 1000; + background: #DE9E0A; + /* border: 1px solid #ddd; */ + width: 270px; +} + +#megadroplinemenu * { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +/* fontawesome style. Remove if not using FA icons */ +#megadroplinemenu .fa { + font-size: 1.5em; +} + +#megadroplinemenu .fa-twitter { + color: #00ACEE; +} + +/* Top Level Menu */ +#megadroplinemenu ul { + z-index: 100; + margin: 0; + padding: 0; + position: relative; + display: flex; + flex-wrap: wrap; + list-style: none; + -webkit-perspective: 1000px; + perspective: 1000px; + -webkit-perspective-origin: 50% 0%; + perspective-origin: 50% 0%; +} + +/* Top level list items */ +#megadroplinemenu > ul li { + display: inline-block; + text-transform: uppercase; +} + +/* right align last two LI elements, Change (2) above to diff number if desired */ +#megadroplinemenu > ul li:nth-last-of-type(2) { + margin-left: auto; + border-left: none; +} + +/* Top level menu items link style */ +#megadroplinemenu > ul > li a { + display: inline-block; + display: flex; + position: relative; + height: 100%; + /* background of menu items (default state) */ + background: #F6BD32; + color: black; + padding: 14px 10px; + border-right: none; + color: #2d2b2b; + text-decoration: none; + font-size: 12px; +} + +/* Top level menu items link style on hover and when active */ +#megadroplinemenu > ul li:hover > a { + background: #DE9E0A; + box-shadow: 0 3px 15px #DE9E0A; +} + +/* Sub ULs style */ +#megadroplinemenu > ul li ul { + position: absolute; + left: -5000px; + top: auto; + opacity: 0; + width: 500px; + transform: rotateX(-70deg); + backface-visibility: hidden; + transform-origin: 50% 0; + background: #DE9E0A; + visibility: hidden; + border: none; + border-width: 1px 0 1px 1px; + box-shadow: 0 3px 15px #DE9E0A; + -webkit-transition: opacity .3s, -webkit- transform .5s, visibility 0s .3s, left 0s .3s; + transition: opacity .3s, transform .5s, visibility 0s .3s, left 0s .3s; +} + +/* First Sub Levels UL style on hover */ +#megadroplinemenu > ul li:hover > ul { + visibility: visible; + left: 0; + opacity: 1; + transform: rotateX(0deg); + -webkit-transition: opacity .5s, -webkit-transform .5s; + transition: opacity .5s, transform .5s; +} + +/* Sub level Menu list items */ +#megadroplinemenu > ul li ul li { + display: inline-block; + flex: 1; + min-width: 140px; + /* min width of sub menu LIs */ +} + +/* Sub Levels link style on hover and when active */ +#megadroplinemenu ul ul li:hover > a { + background: #F6BD32; + text-decoration: underline;; +} + +/* Sub Levels UL style on hover */ +#megadroplinemenu ul ul li:hover > ul { + left: 0; +} + +/* Sub level menu links style */ +#megadroplinemenu ul li ul li a { + font: normal 11px 'Bitter', sans-serif; + padding: 10px; + margin: 0; + background: #DE9E0A; + color: black; + display: block; + font-weight: bold; + width: 100%; + height: 100%; +} + +/* Sub level List Links Descriptions */ +#megadroplinemenu > ul li ul li a div { + text-transform: none; + padding-top: 5px; + font-size: 90%; + color: black; + font-weight: normal; + line-height: 1.5; +} + +/* LIs with a sub UL style */ +#megadroplinemenu ul li > a { + /* add padding to accomodate arrow inside LIs */ + padding-right: 25px; +} + +/* LIs with NO sub UL style */ +#megadroplinemenu ul li > a:only-child { + /* undo padding for non submenu LIs */ + padding-right: 10px; +} + +/* Arrow for LIs with sub ULs */ +#megadroplinemenu ul li > a:after { + /* add arrow inside LIs */ + content: ""; + position: absolute; + height: 0; + width: 0; + border: 5px solid transparent; + border-top-color: black; + top: 19px; + right: 8px; +} + +/* LIs with NO sub UL pseudo class */ +/* remove drop down arrow */ +#megadroplinemenu ul li > a:only-child:after, #megadroplinemenu ul li.noarrow > a:after { + /* undo arrow for non submenu LIs */ + display: none; +} + +#megadroplinemenu ul li.noarrow > a { + padding-right: 10px; +} + +#searchtoggler input { + width: 100%; + font-weight: bold; + font-size: 36px; + padding: 5px; +} + +/* Uneven Line Menu */ +div#burgertoggler { + width: 40px; + /* keep width/height ratio to 1.53 if changing dimensions */ + height: 26px; + margin-bottom: 2em; + position: absolute; + background: DE9E0A; + right: 10px; + /* position toggler to the right of page */ + top: 10px; + display: flex; + cursor: pointer; + flex-direction: column; + justify-content: space-between; + visibility: hidden; + z-index: 100000; + transition: none; +} + +div#burgertoggler > div { + width: 80%; + height: 4px; + background: black; + transform-origin: 0 50%; +} + +div#burgertoggler > div.line1 { + width: 80%; +} + +div#burgertoggler > div.line2 { + width: 100%; +} + +div#burgertoggler.open div.line1 { + transform: rotate(45deg); +} + +div#burgertoggler.open div.line2 { + opacity: 0; + transform: translate3d(-10px,0,0); +} + +div#burgertoggler.open div.line3 { + transform: rotate(-45deg); +} + +/* ####### responsive layout CSS ####### */ +@media (max-width: 680px) { + div#burgertoggler { + visibility: visible; + } + + div#burgertoggler > div { + transition: all .5s; + } + + #megadroplinemenu { + visibility: hidden; + position: fixed; + left: 0; + top: 0; + opacity: 0; + width: 100%; + height: 100%; + transform: scale(.8); + transition: transform .3s, opacity .3s; + } + + #megadroplinemenu.open { + visibility: visible; + opacity: 1; + transform: scale(1); + overflow: auto; + transition: transform .3s, opacity .3s; + } + + #megadroplinemenu > ul { + display: block; + font-size: 18px; + } + + #megadroplinemenu > ul li { + display: block; + } + + /* Undo Arrow for LIs with sub ULs */ + #megadroplinemenu ul li > a:after { + /* add arrow inside LIs */ + display: none; + } + + /* Sub ULs style */ + #megadroplinemenu > ul li ul { + position: static; + display: block; + background: DE9E0A; + visibility: visible; + transform: rotateX(-90deg); + } + + #megadroplinemenu > ul li ul li { + display: block; + } + + #megadroplinemenu.open > ul li ul { + transform: rotateX(0deg); + opacity: 1; + transition: all .3s .3s; + } + + #megadroplinemenu > ul > li a { + display: block; + } + + /* Sub level menu links style */ + #megadroplinemenu ul li ul li a { + height: auto; + padding: 20px; + font-weight: bold; + font-size: 16px; + } + + /* Undo Top level menu items link style on hover for touch devices */ + html.can-touch #megadroplinemenu > ul li:hover > a { + background: transparent; + } + + /* Undo Sub Levels link style on hover and when active for touch devices */ + html.can-touch #megadroplinemenu ul ul li:hover > a { + background: transparent; + color: red; + } + + #megadroplinemenu ul li ul li a div { + font-weight: normal; + } +} + +@media (max-width: 500px) { + /* Sub level menu links style */ #megadroplinemenu ul li ul li a div { + display: none; + } +} diff --git a/css/slick-theme.css b/css/slick-theme.css new file mode 100644 index 0000000..6af3237 --- /dev/null +++ b/css/slick-theme.css @@ -0,0 +1,206 @@ +@charset 'UTF-8'; +/* Slider */ +.slick-loading .slick-list +{ + background: #fff url('./ajax-loader.gif') center center no-repeat; +} + +/* Icons */ +@font-face +{ + font-family: 'slick'; + font-weight: normal; + font-style: normal; + + src: url('./fonts/slick.eot'); + src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg'); +} +/* Arrows */ +.slick-prev, +.slick-next +{ + font-size: 0; + line-height: 0; + + position: absolute; + top: 50%; + + display: block; + + z-index: 100; + + width: 20px; + height: 20px; + padding: 0; + -webkit-transform: translate(0, -50%); + -ms-transform: translate(0, -50%); + transform: translate(0, -50%); + + cursor: pointer; + + color: transparent; + border: none; + outline: none; + background: transparent; +} +.slick-prev:hover, +.slick-prev:focus, +.slick-next:hover, +.slick-next:focus +{ + color: transparent; + outline: none; + background: transparent; +} +.slick-prev:hover:before, +.slick-prev:focus:before, +.slick-next:hover:before, +.slick-next:focus:before +{ + opacity: 1; +} +.slick-prev.slick-disabled:before, +.slick-next.slick-disabled:before +{ + opacity: .25; +} + +.slick-prev:before, +.slick-next:before +{ + font-family: 'slick'; + font-size: 20px; + line-height: 1; + + opacity: .75; + color: white; + + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.slick-prev +{ + left: -1px; +} +[dir='rtl'] .slick-prev +{ + right: -25px; + left: auto; +} +.slick-prev:before +{ + content: '←'; +} +[dir='rtl'] .slick-prev:before +{ + content: '→'; +} + +.slick-next +{ + right: -25px; +} +[dir='rtl'] .slick-next +{ + right: auto; + left: -25px; +} +.slick-next:before +{ + content: '→'; +} +[dir='rtl'] .slick-next:before +{ + content: '←'; +} + +/* Dots */ +.slick-dotted.slick-slider +{ + margin-bottom: 30px; +} + +.slick-dots +{ + position: absolute; + bottom: -25px; + + display: block; + + width: 100%; + padding: 0; + margin: 0; + + list-style: none; + + text-align: center; +} +.slick-dots li +{ + position: relative; + + display: inline-block; + + width: 20px; + height: 20px; + margin: 0 5px; + padding: 0; + + cursor: pointer; +} +.slick-dots li button +{ + font-size: 0; + line-height: 0; + + display: block; + + width: 20px; + height: 20px; + padding: 5px; + + cursor: pointer; + + color: transparent; + border: 0; + outline: none; + background: transparent; +} +.slick-dots li button:hover, +.slick-dots li button:focus +{ + outline: none; +} +.slick-dots li button:hover:before, +.slick-dots li button:focus:before +{ + opacity: 1; +} +.slick-dots li button:before +{ + font-family: 'slick'; + font-size: 6px; + line-height: 20px; + + position: absolute; + top: 0; + left: 0; + + width: 20px; + height: 20px; + + content: '•'; + text-align: center; + + opacity: .25; + color: black; + + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +.slick-dots li.slick-active button:before +{ + opacity: .75; + color: black; +} diff --git a/css/slick.css b/css/slick.css new file mode 100644 index 0000000..57477e8 --- /dev/null +++ b/css/slick.css @@ -0,0 +1,119 @@ +/* Slider */ +.slick-slider +{ + position: relative; + + display: block; + box-sizing: border-box; + + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + -webkit-touch-callout: none; + -khtml-user-select: none; + -ms-touch-action: pan-y; + touch-action: pan-y; + -webkit-tap-highlight-color: transparent; +} + +.slick-list +{ + position: relative; + + display: block; + overflow: hidden; + + margin: 0; + padding: 0; +} +.slick-list:focus +{ + outline: none; +} +.slick-list.dragging +{ + cursor: pointer; + cursor: hand; +} + +.slick-slider .slick-track, +.slick-slider .slick-list +{ + -webkit-transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); +} + +.slick-track +{ + position: relative; + top: 0; + left: 0; + + display: block; + margin-left: auto; + margin-right: auto; +} +.slick-track:before, +.slick-track:after +{ + display: table; + + content: ''; +} +.slick-track:after +{ + clear: both; +} +.slick-loading .slick-track +{ + visibility: hidden; +} + +.slick-slide +{ + display: none; + float: left; + + height: 100%; + min-height: 1px; +} +[dir='rtl'] .slick-slide +{ + float: right; +} +.slick-slide img +{ + display: block; +} +.slick-slide.slick-loading img +{ + display: none; +} +.slick-slide.dragging img +{ + pointer-events: none; +} +.slick-initialized .slick-slide +{ + display: block; +} +.slick-loading .slick-slide +{ + visibility: hidden; +} +.slick-vertical .slick-slide +{ + display: block; + + height: auto; + + border: 1px solid transparent; +} +.slick-arrow.slick-hidden { + display: none; +} diff --git a/css/ui.totop_e_commerce.css b/css/ui.totop_e_commerce.css new file mode 100644 index 0000000..af3de57 --- /dev/null +++ b/css/ui.totop_e_commerce.css @@ -0,0 +1,36 @@ +/* +|-------------------------------------------------------------------------- +| UItoTop jQuery Plugin 1.2 +| http://www.mattvarone.com/web-design/uitotop-jquery-plugin/ +|-------------------------------------------------------------------------- +*/ + +#toTop { + display:none; + text-decoration:none; + position:fixed; + bottom:200px; + right:190px; + overflow:hidden; + width:51px; + height:51px; + border:none; + text-indent:100%; + background:url(../img/ui.totop.png) no-repeat left top; +} + +#toTopHover { + background:url(../img/ui.totop.png) no-repeat left -51px; + width:51px; + height:51px; + display:block; + overflow:hidden; + float:left; + opacity: 0; + -moz-opacity: 0; + filter:alpha(opacity=0); +} + +#toTop:active, #toTop:focus { + outline:none; +} \ No newline at end of file diff --git a/ecommerce_design.html b/ecommerce_design.html new file mode 100644 index 0000000..a46e1e7 --- /dev/null +++ b/ecommerce_design.html @@ -0,0 +1,920 @@ + + + +E-Commerce + + + + + + + + + + + + + + + + + +
+ + + + + + +
+
+ +
+
+
+ + + shopping cart + 0 item(s)- $0.00 + + +
+
+ + +
+ + +
+ +
+
+ +
+ +
+ +

Deals Of The Days

+
+
+ + Camera with mic +
+
+

Boudin Consequat +

+
+ Product rating + + + + +
+

The 30-inch Apple Cinema HD Display delivers an amazing 2560 x 1600 pixel resolution. Designed specifically for professional,,,, +

+ $45.00 + $55.00 +
+ + + +
+
+
+
+
+ +
+ +

Featured Products

+ +
+
+ +
+ +
+ +
+ +
+ + Gamebox +
+

Adipisicing

+
+ Product rating + + + + +
+ $45.00 + $55.00 +
+ + + +
+
+
+
+ +
+ Acoustics +
+

Adipisicing

+
+ Product rating + + + + +
+ $45.00 + $55.00 +
+ + + +
+
+
+
+ +
+ Lamp +
+

Adipisicing

+
+ Product rating + + + + +
+ $45.00 + $55.00 +
+ + + +
+
+
+
+ +
+ + Camera with mic +
+

Adipisicing

+
+ Product rating + + + + +
+ $45.00 + $55.00 +
+ + + +
+
+
+
+ +
+ Mobile phone iPhone +
+

Adipisicing

+
+ Product rating + + + + +
+ $45.00 + $55.00 +
+ + + +
+
+
+
+
+ +
+ +
+
+
+ + Female blouse +
+

Adipisicing

+
+ Product rating + + + + +
+ $45.00 + $55.00 +
+ + + +
+
+
+
+
+
+ Female T-shirt +
+

Adipisicing

+
+ Product rating + + + + +
+ $45.00 + $55.00 +
+ + + +
+
+
+
+
+
+ Famale shorts +
+

Adipisicing

+
+ Product rating + + + + +
+ $45.00 + $55.00 +
+ + + +
+
+
+
+
+
+ + Female blouse +
+

Adipisicing

+
+ Product rating + + + + +
+ $45.00 + $55.00 +
+ + + +
+
+
+
+
+
+ + Female bag +
+

Adipisicing

+
+ Product rating + + + + +
+ $45.00 + $55.00 +
+ + + +
+
+
+
+
+
+ + Female T-shirt +
+

Adipisicing

+
+ Product rating + + + + +
+ $45.00 + $55.00 +
+ + + +
+
+
+
+
+
+ + Female blouse +
+

Adipisicing

+
+ Product rating + + + + +
+ $45.00 + $55.00 +
+ + + +
+
+
+
+
+
+ Female shorts +
+

Adipisicing

+
+ Product rating + + + + +
+ $45.00 + $55.00 +
+ + + +
+
+
+
+
+
+ +
+ +
+
+ Interior One +

consectetur iaculis

+
+
+ Interior Two +

consectetur iaculis

+
+
+ +
+
+ Acoustics +
+

Adipisicing

+
+ Product rating + + + + +
+ $45.00 + $55.00 +
+ + + +
+
+
+
+ Camera with mic +
+

Adipisicing

+
+ Product rating + + + + +
+ $45.00 + $55.00 +
+ + + +
+
+
+
+
+ +
+
+ + + +
+ + + + + + + + + + + + + + diff --git a/img/ui.totop.png b/img/ui.totop.png new file mode 100644 index 0000000..17dcce6 Binary files /dev/null and b/img/ui.totop.png differ diff --git a/img/ui.totop_origin.png b/img/ui.totop_origin.png new file mode 100644 index 0000000..316b8a7 Binary files /dev/null and b/img/ui.totop_origin.png differ diff --git a/js/ddsmoothmenu_master/.gitattributes b/js/ddsmoothmenu_master/.gitattributes new file mode 100644 index 0000000..412eeda --- /dev/null +++ b/js/ddsmoothmenu_master/.gitattributes @@ -0,0 +1,22 @@ +# Auto detect text files and perform LF normalization +* text=auto + +# Custom for Visual Studio +*.cs diff=csharp +*.sln merge=union +*.csproj merge=union +*.vbproj merge=union +*.fsproj merge=union +*.dbproj merge=union + +# Standard to msysgit +*.doc diff=astextplain +*.DOC diff=astextplain +*.docx diff=astextplain +*.DOCX diff=astextplain +*.dot diff=astextplain +*.DOT diff=astextplain +*.pdf diff=astextplain +*.PDF diff=astextplain +*.rtf diff=astextplain +*.RTF diff=astextplain diff --git a/js/ddsmoothmenu_master/.gitignore b/js/ddsmoothmenu_master/.gitignore new file mode 100644 index 0000000..b9d6bd9 --- /dev/null +++ b/js/ddsmoothmenu_master/.gitignore @@ -0,0 +1,215 @@ +################# +## Eclipse +################# + +*.pydevproject +.project +.metadata +bin/ +tmp/ +*.tmp +*.bak +*.swp +*~.nib +local.properties +.classpath +.settings/ +.loadpath + +# External tool builders +.externalToolBuilders/ + +# Locally stored "Eclipse launch configurations" +*.launch + +# CDT-specific +.cproject + +# PDT-specific +.buildpath + + +################# +## Visual Studio +################# + +## Ignore Visual Studio temporary files, build results, and +## files generated by popular Visual Studio add-ons. + +# User-specific files +*.suo +*.user +*.sln.docstates + +# Build results + +[Dd]ebug/ +[Rr]elease/ +x64/ +build/ +[Bb]in/ +[Oo]bj/ + +# MSTest test Results +[Tt]est[Rr]esult*/ +[Bb]uild[Ll]og.* + +*_i.c +*_p.c +*.ilk +*.meta +*.obj +*.pch +*.pdb +*.pgc +*.pgd +*.rsp +*.sbr +*.tlb +*.tli +*.tlh +*.tmp +*.tmp_proj +*.log +*.vspscc +*.vssscc +.builds +*.pidb +*.log +*.scc + +# Visual C++ cache files +ipch/ +*.aps +*.ncb +*.opensdf +*.sdf +*.cachefile + +# Visual Studio profiler +*.psess +*.vsp +*.vspx + +# Guidance Automation Toolkit +*.gpState + +# ReSharper is a .NET coding add-in +_ReSharper*/ +*.[Rr]e[Ss]harper + +# TeamCity is a build add-in +_TeamCity* + +# DotCover is a Code Coverage Tool +*.dotCover + +# NCrunch +*.ncrunch* +.*crunch*.local.xml + +# Installshield output folder +[Ee]xpress/ + +# DocProject is a documentation generator add-in +DocProject/buildhelp/ +DocProject/Help/*.HxT +DocProject/Help/*.HxC +DocProject/Help/*.hhc +DocProject/Help/*.hhk +DocProject/Help/*.hhp +DocProject/Help/Html2 +DocProject/Help/html + +# Click-Once directory +publish/ + +# Publish Web Output +*.Publish.xml +*.pubxml + +# NuGet Packages Directory +## TODO: If you have NuGet Package Restore enabled, uncomment the next line +#packages/ + +# Windows Azure Build Output +csx +*.build.csdef + +# Windows Store app package directory +AppPackages/ + +# Others +sql/ +*.Cache +ClientBin/ +[Ss]tyle[Cc]op.* +~$* +*~ +*.dbmdl +*.[Pp]ublish.xml +*.pfx +*.publishsettings + +# RIA/Silverlight projects +Generated_Code/ + +# Backup & report files from converting an old project file to a newer +# Visual Studio version. Backup files are not needed, because we have git ;-) +_UpgradeReport_Files/ +Backup*/ +UpgradeLog*.XML +UpgradeLog*.htm + +# SQL Server files +App_Data/*.mdf +App_Data/*.ldf + +############# +## Windows detritus +############# + +# Windows image file caches +Thumbs.db +ehthumbs.db + +# Folder config file +Desktop.ini + +# Recycle Bin used on file shares +$RECYCLE.BIN/ + +# Mac crap +.DS_Store + + +############# +## Python +############# + +*.py[co] + +# Packages +*.egg +*.egg-info +dist/ +build/ +eggs/ +parts/ +var/ +sdist/ +develop-eggs/ +.installed.cfg + +# Installer logs +pip-log.txt + +# Unit test / coverage reports +.coverage +.tox + +#Translations +*.mo + +#Mr Developer +.mr.developer.cfg diff --git a/js/ddsmoothmenu_master/README.md b/js/ddsmoothmenu_master/README.md new file mode 100644 index 0000000..9cf23c7 --- /dev/null +++ b/js/ddsmoothmenu_master/README.md @@ -0,0 +1,173 @@ +# Smooth Navigational Menu # + +*Description:* Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair. And that's a good thing given the important role of this element in any site. The menu's contents can either be from direct markup on the page, or an external file and fetched via Ajax instead. And thanks to jQuery, a configurable, sleek "slide plus fade in" transition is applied during the unveiling of the sub menus. The menu supports both the horizontal and vertical (sidebar) orientation. + +## Directions ## + +*Step 1:* This script uses the following external files: + ++ jQuery 1.4 or above (served via Google CDN) ++ ddsmoothmenu.js ++ ddsmoothmenu.css ++ ddsmoothmenu-v.css ++ 4 images + +*Step 2:* Add the below code to the HEAD section of your page: + + + + + + + + + + + +*Step 3:* Then, add the below sample markup to your page: + + + + + + +

Example 1

+ +
+ +
+
+ + +

Example 2

+ +
+ +
+
+ +## Smooth Navigational Menu set up ## + +See script project page for additional details on setup and documentation: diff --git a/js/ddsmoothmenu_master/ddsmoothmenu-v.css b/js/ddsmoothmenu_master/ddsmoothmenu-v.css new file mode 100644 index 0000000..d7d8ee2 --- /dev/null +++ b/js/ddsmoothmenu_master/ddsmoothmenu-v.css @@ -0,0 +1,58 @@ +.ddsmoothmenu-v{ +display: none; +} + +.ddsmoothmenu-v ul{ +margin: 0; +padding: 0; +width: 170px; /* Main Menu Item widths */ +list-style-type: none; +font: bold 12px Verdana; +} + +.ddsmoothmenu-v ul li{ +position: relative; +float: none; +} + +/* Top level menu links style */ +.ddsmoothmenu-v ul li a{ +display: block; +overflow: auto; /*force hasLayout in IE7 */ +color: white; +text-decoration: none; +padding: 6px 23px 6px 6px; +border-bottom: 1px solid #778; +border-right: 1px solid #778; +} + +.ddsmoothmenu-v ul li a:link, .ddsmoothmenu-v ul li a:visited, .ddsmoothmenu-v ul li a:active{ +background: #1c5a80; /*background of menu items (default state)*/ +color: white; +} + + +.ddsmoothmenu-v ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/ +background: lightblue !important; +color: navy; +} + +.ddsmoothmenu-v ul li a:hover{ +background: lightblue; /*background of menu items during onmouseover (hover state)*/ +color: navy; +} + +/*Sub level menu items */ +.ddsmoothmenu-v ul li ul{ +position: absolute; +width: 170px; /*Sub Menu Items width */ +top: 0; +font-weight: normal; +visibility: hidden; +} + + +/* Holly Hack for IE \*/ +* html .ddsmoothmenu-v ul li { float: left; height: 1%; } +* html .ddsmoothmenu-v ul li a { height: 1%; } +/* End */ \ No newline at end of file diff --git a/js/ddsmoothmenu_master/ddsmoothmenu.css b/js/ddsmoothmenu_master/ddsmoothmenu.css new file mode 100644 index 0000000..34fc4f6 --- /dev/null +++ b/js/ddsmoothmenu_master/ddsmoothmenu.css @@ -0,0 +1,290 @@ +.ddsmoothmenu{ +font: bold 12px Verdana; +background: #414141; /*background of menu bar (default state)*/ +width: 100%; +display: none; +} + +.ddsmoothmenu ul{ +z-index:100; +margin: 0; +padding: 0; +list-style-type: none; +} + +/*Top level list items*/ +.ddsmoothmenu ul li{ +position: relative; +display: inline; +float: left; +} + +/*Top level menu link items style*/ +.ddsmoothmenu ul li a{ +display: block; +background: #414141; /*background of menu items (default state)*/ +color: white; +padding: 8px 10px; +border-right: 1px solid #778; +color: #2d2b2b; +text-decoration: none; +} + +* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/ +display: inline-block; +} + +.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{ +color: white; +} + +.ddsmoothmenu ul li a.selected { /*CSS class that's dynamically added to the currently active menu items' LI A element*/ +background: black !important; +color: white; +} + +.ddsmoothmenu ul li a:hover{ +background: black; /*background of menu items during onmouseover (hover state)*/ +color: white; +} + +/* sub menus */ +.ddsmoothmenu ul li ul{ +position: absolute; +left: -3000px; +display: none; /*collapse all sub menus to begin with*/ +visibility: hidden; +} + +/*Sub level menu list items (alters style from Top level List Items)*/ +.ddsmoothmenu ul li ul li{ +display: list-item; +float: none; +} + +/*All subsequent sub menu levels vertical offset after 1st level sub menu */ +.ddsmoothmenu ul li ul li ul{ +top: 0; +} + +/* Sub level menu links style */ +.ddsmoothmenu ul li ul li a{ +font: normal 13px Verdana; +width: 160px; /*width of sub menus*/ +padding: 5px; +margin: 0; +border-top-width: 0; +border-bottom: 1px solid gray; +} + +/* Holly Hack for IE \*/ +* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/ + + +/* ######### CSS classes applied to down and right arrow images ######### */ + +.downarrowclass{ +position: absolute; +top: 12px; +right: 7px; +} + +.rightarrowclass{ +position: absolute; +top: 6px; +right: 5px; +} + +.leftarrowclass{ +margin-right: 5px; +} + +/* ######### CSS for shadow added to sub menus ######### */ + +.ddshadow{ +position: absolute; +left: 0; +top: 0; +width: 0; +height: 0; +background-color: #ccc; /* generally should be just a little lighter than the box-shadow color for CSS3 capable browsers */ +} + +.toplevelshadow{ +margin: 5px 0 0 5px; /* in NON CSS3 capable browsers gives the offset of the shadow */ +opacity: 0.8; /* shadow opacity mostly for NON CSS3 capable browsers. Doesn't work in IE */ +} + +.ddcss3support .ddshadow.toplevelshadow { +margin: 0; /* in CSS3 capable browsers overrides offset from NON CSS3 capable browsers, allowing the box-shadow values in the next selector to govern that */ +/* opacity: 1; */ /* optionally uncomment this to remove partial opacity for browsers supporting a box-shadow property which has its own slight gradient opacity */ +} + +.ddcss3support .ddshadow { +background-color: transparent; +box-shadow: 5px 5px 5px #aaa; /* box-shadow color generally should be a little darker than that for the NON CSS3 capable browsers background-color */ +-moz-box-shadow: 5px 5px 5px #aaa; +-webkit-box-shadow: 5px 5px 5px #aaa; +} + +/* ######### Mobile menu container CSS ######### */ + +div.ddsmoothmobile{ /* main mobile menu container */ +background: #414141; +color: white; +position: fixed; +top: 0; +left: 0; +width: 200px; /* width of mobile menu */ +height: 300px; +overflow: hidden; +visibility: hidden; +border-radius: 0 0 10px 0; +box-shadow: 0 0 10px gray; +} + +div.ddsmoothmobile a{ +color: white; +text-decoration: none; +} + +div.ddsmoothmobile div.topulsdiv{ /* Single DIV that surrounds all top level ULs before being flattened, or the ULs on the "frontpage" of the menu */ +position: relative; +background: #414141; +overflow-y: auto; +width: 100%; +height: 100%; +} + + +div.ddsmoothmobile ul{ /* style for all ULs in general inside mobile menu */ +list-style: none; +width: 100%; +top: 0; +left: 0; +background: #414141; +margin: 0; +padding: 0; +} + +div.ddsmoothmobile div.topulsdiv ul.submenu{ /* top level ULs style */ +} + + +div.ddsmoothmobile ul.submenu{ /* sub level ULs style */ +position: absolute; +height: 100%; +overflow-y: auto; +} + +div.ddsmoothmobile ul li{ +border-bottom: 1px solid gray; +position: relative; +font-weight: bold; +} + +div.ddsmoothmobile ul li.breadcrumb{ /* breadcrumb LI that's added to the top of every sub level UL */ +cursor: pointer; +padding: 10px; +background: black; +} + +div.ddsmoothmobile ul li a{ +display: block; +padding: 6px; +} + +div.ddsmoothmobile ul li a:hover{ +background: black; +} + +/* ############# Animated Drawer icon (mobile menu toggler) CSS ############# */ + +.animateddrawer{ + font-size: 10px; /* Base font size. Adjust this value to modify size of drawer icon */ + width: 3em; + height: 2.8em; + outline: none; + position: fixed; /* BY default, make toggler fixed on screen */ + display: none; + top: 10px; /* Position at upper right corner */ + right: 10px; + background: white; + z-index: 1000; +} + +.animateddrawer:before, .animateddrawer:after{ + position: absolute; + content: ''; + display: block; + width: 100%; + height: 0.6em; /* height of top and bottom drawer line */ + background: black; + border-radius: 2px; + top: 0; + left: 0; + opacity: 1; + -webkit-transition: all 0.3s ease-in; /* set transition type and time */ + transition: all 0.3s ease-in; +} + +.animateddrawer:after{ + top: auto; + bottom: 0; +} + +.animateddrawer span{ + width: 100%; + height: 0.6em; /* height of middle drawer line */ + background: black; + position: absolute; + top: 50%; + margin-top: -0.3em; /* set this to - half of middle drawer line height */ + border-radius: 2px; + -ms-transform-origin: 50% 50%; + -webkit-transform-origin: 50% 50%; + transform-origin: 50% 50%; + -webkit-transition: all 0.3s ease-in 0.3s; /* set transition type and time */ + transition: all 0.3s ease-in 0.3s; +} + +.animateddrawer span::after{ + content: ''; + display: block; + width: 100%; + height: 0.6em; /* height of middle drawer line */ + background: black; + border-radius: 2px; + position: absolute; + -ms-transform-origin: 50% 50%; + -webkit-transform-origin: 50% 50%; + transform-origin: 50% 50%; + -webkit-transition: all 0.3s ease-in 0.3s; /* set transition type and time */ + transition: all 0.3s ease-in 0.3s; +} + +.animateddrawer.open{ +} + +.animateddrawer.open:before{ /* style when .open class is added to button */ + top: 50%; + margin-top: -0.3em; /* set this to - half of top drawer line height */ + opacity: 0; +} + +.animateddrawer.open:after{ /* style when .open class is added to button */ + bottom: 50%; + opacity: 0; +} + +.animateddrawer.open span{ /* style when .open class is added to button */ + -ms-transform: rotate(-45deg); + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); +} + +.animateddrawer.open span:after{ /* style when .open class is added to button */ + -ms-transform: rotate(-90deg); + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); +} diff --git a/js/ddsmoothmenu_master/ddsmoothmenu.jquery.json b/js/ddsmoothmenu_master/ddsmoothmenu.jquery.json new file mode 100644 index 0000000..dde57dc --- /dev/null +++ b/js/ddsmoothmenu_master/ddsmoothmenu.jquery.json @@ -0,0 +1,25 @@ +{ + "name": "ddsmoothmenu", + "title": "Smooth Navigational Menu", + "description": "Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair. And that's a good thing given the important role of this element in any site. The menu's contents can either be from direct markup on the page, or an external file and fetched via Ajax instead. And thanks to jQuery, a configurable, sleek \"slide plus fade in\" transition is applied during the unveiling of the sub menus. The menu supports both the horizontal and vertical (sidebar) orientation.", + "keywords": ["menu", "dropdown", "bar", "navigation"], + "version": "3.0.1", + "author": { + "name": "Dynamic Drive", + "email" : "ddrivehelp@gmail.com", + "url": "http://www.dynamicdrive.com" + }, + "licenses": [ + { + "type": "Freeware", + "url": "http://www.dynamicdrive.com/notice.htm" + } + ], + "dependencies": { + "jquery": ">=1.4" + }, + "homepage": "http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm", + "docs": "http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm", + "demo": "http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm", + "download": "http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm" +} \ No newline at end of file diff --git a/js/ddsmoothmenu_master/ddsmoothmenu.js b/js/ddsmoothmenu_master/ddsmoothmenu.js new file mode 100644 index 0000000..ed04cb5 --- /dev/null +++ b/js/ddsmoothmenu_master/ddsmoothmenu.js @@ -0,0 +1,803 @@ +//** Smooth Navigational Menu- By Dynamic Drive DHTML code library: http://www.dynamicdrive.com +//** Script Download/ instructions page: http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/ +//** Menu created: Nov 12, 2008 + +//** Dec 12th, 08" (v1.01): Fixed Shadow issue when multiple LIs within the same UL (level) contain sub menus: http://www.dynamicdrive.com/forums/showthread.php?t=39177&highlight=smooth + +//** Feb 11th, 09" (v1.02): The currently active main menu item (LI A) now gets a CSS class of ".selected", including sub menu items. + +//** May 1st, 09" (v1.3): +//** 1) Now supports vertical (side bar) menu mode- set "orientation" to 'v' +//** 2) In IE6, shadows are now always disabled + +//** July 27th, 09" (v1.31): Fixed bug so shadows can be disabled if desired. +//** Feb 2nd, 10" (v1.4): Adds ability to specify delay before sub menus appear and disappear, respectively. See showhidedelay variable below + +//** Dec 17th, 10" (v1.5): Updated menu shadow to use CSS3 box shadows when the browser is FF3.5+, IE9+, Opera9.5+, or Safari3+/Chrome. Only .js file changed. + +//** Jun 28th, 2012: Unofficial update adds optional hover images for down and right arrows in the format: filename_over.ext +//** These must be present for whichever or both of the arrow(s) are used and will preload. + +//** Dec 23rd, 2012 Unofficial update to fixed configurable z-index, add method option to init "toggle" which activates on click or "hover" +//** which activates on mouse over/out - defaults to "toggle" (click activation), with detection of touch devices to activate on click for them. +//** Add option for when there are two or more menus using "toggle" activation, whether or not all previously opened menus collapse +//** on new menu activation, or just those within that specific menu +//** See: http://www.dynamicdrive.com/forums/showthread.php?72449-PLEASE-HELP-with-Smooth-Navigational-Menu-(v1-51)&p=288466#post288466 + +//** Feb 7th, 2013 Unofficial update change fixed configurable z-index back to graduated for cases of main UL wrapping. Update off menu click detection in +//** ipad/iphone to touchstart because document click wasn't registering. see: http://www.dynamicdrive.com/forums/showthread.php?72825 + +//** Feb 14th, 2013 Add window.ontouchstart to means tests for detecting touch browsers - thanks DD! +//** Feb 15th, 2013 Add 'ontouchstart' in window and 'ontouchstart' in document.documentElement to means tests for detecting touch browsers - thanks DD! + +//** Feb 20th, 2013 correct for IE 9+ sometimes adding a pixel to the offsetHeight of the top level trigger for horizontal menus +//** Feb 23rd, 2013 move CSS3 shadow adjustment for IE 9+ to the script, add resize event for all browsers to reposition open toggle +//** menus and shadows in window if they would have gone to a different position at the new window dimensions +//** Feb 25th, 2013 (v2.0) All unofficial updates by John merged into official and now called v2.0. Changed "method" option's default value to "hover" +//** May 14th, 2013 (v2.1) Adds class 'repositioned' to menus moved due to being too close to the browser's right edge +//** May 30th, 2013 (v2.1) Change from version sniffing to means testing for jQuery versions which require added code for click toggle event handling +//** Sept 15th, 2013 add workaround for false positives for touch on Chrome +//** Sept 22nd, 2013 (v2.2) Add vertical repositioning if sub menu will not fit in the viewable vertical area. May be turned off by setting +// repositionv: false, +//** in the init. Sub menus that are vertically repositioned will have the class 'repositionedv' added to them. +//** March 17th, 15' (v3.0): Adds fully mobile friendly, compact version of menu that's activated in mobile and small screen browsers. +//** Refines drop down menu behaviour when there's neither space to the right nor left to accommodate sub menu; in that case sub menu overlaps parent menu. +//** Nov 3rd, 15' (v3.01): Fixed long drop down menus causing a vertical document scrollbar when page loads +//** April 1st, 16' (v3.02): Fixed Chrome desktop falsely reporting as touch enabled, requiring clicking on menu items to drop down. +var ddsmoothmenu = { + +///////////////////////// Global Configuration Options: ///////////////////////// + +mobilemediaquery: "screen and (max-width: 700px)", // CSS media query string that when matched activates mobile menu (while hiding default) +//Specify full URL to down and right arrow images (23 is padding-right for top level LIs with drop downs, 6 is for vertical top level items with fly outs): +arrowimages: {down:['downarrowclass', 'js/ddsmoothmenu_master/images/menu_arrow.png', 23], right:['rightarrowclass', 'js/ddsmoothmenu_master/images/right.gif', 6], left:['leftarrowclass', 'js/ddsmoothmenu_master/images/left.gif']}, +transition: {overtime:300, outtime:300}, //duration of slide in/ out animation, in milliseconds +mobiletransition: 200, // duration of slide animation in mobile menu, in milliseconds +shadow: false, //enable shadow? (offsets now set in ddsmoothmenu.css stylesheet) +showhidedelay: {showdelay: 100, hidedelay: 200}, //set delay in milliseconds before sub menus appear and disappear, respectively +zindexvalue: 1000, //set z-index value for menus +closeonnonmenuclick: true, //when clicking outside of any "toggle" method menu, should all "toggle" menus close? +closeonmouseout: false, //when leaving a "toggle" menu, should all "toggle" menus close? Will not work on touchscreen + +/////////////////////// End Global Configuration Options //////////////////////// + +overarrowre: /(?=\.(gif|jpg|jpeg|png|bmp))/i, +overarrowaddtofilename: '_over', +detecttouch: !!('ontouchstart' in window) || !!('ontouchstart' in document.documentElement) || !!window.ontouchstart || (!!window.Touch && !!window.Touch.length) || !!window.onmsgesturechange || (window.DocumentTouch && window.document instanceof window.DocumentTouch), +detectwebkit: navigator.userAgent.toLowerCase().indexOf("applewebkit") > -1, //detect WebKit browsers (Safari, Chrome etc) +detectchrome: navigator.userAgent.toLowerCase().indexOf("chrome") > -1, //detect chrome +ismobile: navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) != null, //boolean check for popular mobile browsers +idevice: /ipad|iphone/i.test(navigator.userAgent), +detectie6: (function(){var ie; return (ie = /MSIE (\d+)/.exec(navigator.userAgent)) && ie[1] < 7;})(), +detectie9: (function(){var ie; return (ie = /MSIE (\d+)/.exec(navigator.userAgent)) && ie[1] > 8;})(), +ie9shadow: function(){}, +css3support: typeof document.documentElement.style.boxShadow === 'string' || (!document.all && document.querySelector), //detect browsers that support CSS3 box shadows (ie9+ or FF3.5+, Safari3+, Chrome etc) +prevobjs: [], menus: null, +mobilecontainer: {$main: null, $topulsdiv: null, $toggler: null, hidetimer: null}, +mobilezindexvalue: 2000, // mobile menus starting zIndex + +executelink: function($, prevobjs, e){ + var prevscount = prevobjs.length, link = e.target; + while(--prevscount > -1){ + if(prevobjs[prevscount] === this){ + prevobjs.splice(prevscount, 1); + if(link.href !== ddsmoothmenu.emptyhash && link.href && $(link).is('a') && !$(link).children('span.' + ddsmoothmenu.arrowimages.down[0] +', span.' + ddsmoothmenu.arrowimages.right[0]).length){ + if(link.target && link.target !== '_self'){ + window.open(link.href, link.target); + } else { + window.location.href = link.href; + } + e.stopPropagation(); + } + } + } +}, + +repositionv: function($subul, $link, newtop, winheight, doctop, method, menutop){ + menutop = menutop || 0; + var topinc = 0, doclimit = winheight + doctop; + $subul.css({top: newtop, display: 'block'}); + while($subul.offset().top < doctop) { + $subul.css({top: ++newtop}); + ++topinc; + } + if(!topinc && $link.offset().top + $link.outerHeight() < doclimit && $subul.data('height') + $subul.offset().top > doclimit){ + $subul.css({top: doctop - $link.parents('ul').last().offset().top - $link.position().top}); + } + method === 'toggle' && $subul.css({display: 'none'}); + if(newtop !== menutop){$subul.addClass('repositionedv');} + return [topinc, newtop]; +}, + +updateprev: function($, prevobjs, $curobj){ + var prevscount = prevobjs.length, prevobj, $indexobj = $curobj.parents().add(this); + while(--prevscount > -1){ + if($indexobj.index((prevobj = prevobjs[prevscount])) < 0){ + $(prevobj).trigger('click', [1]); + prevobjs.splice(prevscount, 1); + } + } + prevobjs.push(this); +}, + +subulpreventemptyclose: function(e){ + var link = e.target; + if(link.href === ddsmoothmenu.emptyhash && $(link).parent('li').find('ul').length < 1){ + e.preventDefault(); + e.stopPropagation(); + } +}, + +getajaxmenu: function($, setting, nobuild){ //function to fetch external page containing the panel DIVs + var $menucontainer=$('#'+setting.contentsource[0]); //reference empty div on page that will hold menu + $menucontainer.html("Loading Menu..."); + $.ajax({ + url: setting.contentsource[1], //path to external menu file + async: true, + dataType: 'html', + error: function(ajaxrequest){ + setting.menustate = "error" + $menucontainer.html('Error fetching content. Server Response: '+ajaxrequest.responseText); + }, + success: function(content){ + setting.menustate = "fetched" + $menucontainer.html(content).find('#' + setting.mainmenuid).css('display', 'block'); + !!!nobuild && ddsmoothmenu.buildmenu($, setting); + } + }); +}, + +getajaxmenuMobile: function($, setting){ //function to fetch external page containing the primary menu UL + setting.mobilemenustate = 'fetching' + $.ajax({ + url: setting.contentsource[1], //path to external menu file + async: true, + dataType: 'html', + error: function(ajaxrequest){ + setting.mobilemenustate = 'error' + alert("Error fetching Ajax content " + ajaxrequest.responseText) + }, + success: function(content){ + var $ul = $(content).find('>ul') + setting.mobilemenustate = 'fetched' + ddsmoothmenu.buildmobilemenu($, setting, $ul); + } + }); +}, + +closeall: function(e){ + var smoothmenu = ddsmoothmenu, prevscount; + if(!smoothmenu.globaltrackopen){return;} + if(e.type === 'mouseleave' || ((e.type === 'click' || e.type === 'touchstart') && smoothmenu.menus.index(e.target) < 0)){ + prevscount = smoothmenu.prevobjs.length; + while(--prevscount > -1){ + $(smoothmenu.prevobjs[prevscount]).trigger('click'); + smoothmenu.prevobjs.splice(prevscount, 1); + } + } +}, + +emptyhash: $('').get(0).href, + +togglemobile: function(action, duration){ + if (!this.mobilecontainer.$main) + return + clearTimeout(this.mobilecontainer.hidetimer) + var $mobilemenu = this.mobilecontainer.$main + var duration = duration || this.mobiletransition + if ($mobilemenu.css('visibility') == 'hidden' && (!action || action == 'open')){ + $mobilemenu.css({left: '-100%', visibility: 'visible'}).animate({left: 0}, duration) + this.mobilecontainer.$toggler.addClass('open') + } + else if ($mobilemenu.css('visibility') == 'visible' && (!action || action != 'open')){ + $mobilemenu.animate({left: '-100%'}, duration, function(){this.style.visibility = 'hidden'}) + this.mobilecontainer.$toggler.removeClass('open') + } + return false + +}, + +buildmobilemenu: function($, setting, $ul){ + + function flattenuls($mainul, cloneulBol, callback, finalcall){ + var callback = callback || function(){} + var finalcall = finalcall || function(){} + var $headers = $mainul.find('ul').parent() + var $mainulcopy = cloneulBol? $mainul.clone() : $mainul + var $flattened = jQuery(document.createDocumentFragment()) + var $headers = $mainulcopy.find('ul').parent() + for (var i=$headers.length-1; i>=0; i--){ // loop through headers backwards, so we end up with topmost UL last + var $header = $headers.eq(i) + var $subul = $header.find('>ul').prependTo($flattened) + callback(i, $header, $subul) + } + $mainulcopy.prependTo($flattened) // Add top most UL to collection + finalcall($mainulcopy) + return $flattened + } + + var $mainmenu = $('#' + setting.mainmenuid) + var $mainul = $ul + var $topulref = null + + var flattened = flattenuls($mainul, false, + function(i, $header, $subul){ // loop through header LIs and sub ULs + $subul.addClass("submenu") + var $breadcrumb = $('