WordPress.org
Get WordPress

Plugin Directory

Changeset 2796048


Ignore:
Timestamp:
10/09/2022 02:49:23 AM (3 years ago)
Author:
hoosoft
Message:

Tweak: Added a new style - Animation

Location:
sidebar-menu
Files:
68 added
6 edited

Legend:

Unmodified
Added
Removed

  • sidebar-menu/trunk/assets/css/main.css

    r2795894 r2796048  
    1 .sidebar-menu ul{
     1/* style classic*/
     2.sidebar-menu ul,
     3.sidebar-menu ul li{
    24    list-style: none;
    35}
    … …  
    7981  margin-bottom: 0;
    8082}
     83
     84/*style animation*/
     85
     86.hoo-animation {
     87  list-style: none;
     88  padding: 0;
     89  margin: 0;
     90  background: #FFF;
     91  border-radius: 2px;
     92  -moz-border-radius: 2px;
     93  -webkit-border-radius: 2px;
     94  width: 250px;
     95}
     96.hoo-animation li {
     97  position: relative;
     98}
     99.hoo-animation li a {
     100  display: block;
     101  text-decoration: none;
     102  padding: 12px 20px;
     103  color: #777;
     104  text-align: left;
     105  position: relative;
     106  border-bottom: 1px solid #EEE;
     107}
     108.hoo-animation li a i {
     109  float: left;
     110  font-size: 20px;
     111  margin: 0 10px 0 0;
     112}
     113
     114.hoo-animation li a p {
     115  float: left;
     116  margin: 0 ;
     117}
     118
     119.hoo-animation li a strong {
     120  display: block;
     121  text-transform: uppercase;
     122}
     123.hoo-animation li a small {
     124  display: block;
     125  font-size: 10px;
     126}
     127
     128.hoo-animation li a i, .hoo-animation li a strong, .hoo-animation li a small {
     129  position: relative;
     130 
     131  transition: all 300ms linear;
     132  -o-transition: all 300ms linear;
     133  -ms-transition: all 300ms linear;
     134  -moz-transition: all 300ms linear;
     135  -webkit-transition: all 300ms linear;
     136}
     137.hoo-animation li:hover > a i {
     138    opacity: 1;
     139    -webkit-animation: moveFromTop 300ms ease-in-out;
     140    -moz-animation: moveFromTop 300ms ease-in-out;
     141    -ms-animation: moveFromTop 300ms ease-in-out;
     142    -o-animation: moveFromTop 300ms ease-in-out;
     143    animation: moveFromTop 300ms ease-in-out;
     144}
     145.hoo-animation li:hover a strong {
     146    opacity: 1;
     147    -webkit-animation: moveFromLeft 300ms ease-in-out;
     148    -moz-animation: moveFromLeft 300ms ease-in-out;
     149    -ms-animation: moveFromLeft 300ms ease-in-out;
     150    -o-animation: moveFromLeft 300ms ease-in-out;
     151    animation: moveFromLeft 300ms ease-in-out;
     152}
     153.hoo-animation li:hover a small {
     154    opacity: 1;
     155    -webkit-animation: moveFromRight 300ms ease-in-out;
     156    -moz-animation: moveFromRight 300ms ease-in-out;
     157    -ms-animation: moveFromRight 300ms ease-in-out;
     158    -o-animation: moveFromRight 300ms ease-in-out;
     159    animation: moveFromRight 300ms ease-in-out;
     160}
     161
     162.hoo-animation li:hover > a {
     163  color: #e67e22;
     164}
     165.hoo-animation li.active > a {
     166  position: relative;
     167  color: #e67e22;
     168  border:0;
     169  box-shadow: 0 0 5px #DDD;
     170  -moz-box-shadow: 0 0 5px #DDD;
     171  -webkit-box-shadow: 0 0 5px #DDD;
     172  border-left: 4px solid #e67e22;
     173  border-right: 4px solid #e67e22;
     174  margin: 0 -4px;
     175}
     176.hoo-animation li.active > a:before {
     177  content: "";
     178  position: absolute;
     179  top: 42%;
     180  left: 0;
     181  border-left: 5px solid #e67e22;
     182  border-top: 5px solid transparent;
     183  border-bottom: 5px solid transparent;
     184}
     185
     186.hoo-animation li.active > a:after {
     187  content: "";
     188  position: absolute;
     189  top: 42%;
     190  right: 0;
     191  border-right: 5px solid #e67e22;
     192  border-top: 5px solid transparent;
     193  border-bottom: 5px solid transparent;
     194}
     195
     196@-webkit-keyframes moveFromTop {
     197    from {
     198        opacity: 0;
     199        -webkit-transform: translateY(200%);
     200        -moz-transform: translateY(200%);
     201        -ms-transform: translateY(200%);
     202        -o-transform: translateY(200%);
     203        transform: translateY(200%);
     204    }
     205    to {
     206        opacity: 1;
     207        -webkit-transform: translateY(0%);
     208        -moz-transform: translateY(0%);
     209        -ms-transform: translateY(0%);
     210        -o-transform: translateY(0%);
     211        transform: translateY(0%);
     212    }
     213}
     214@-webkit-keyframes moveFromLeft {
     215    from {
     216        opacity: 0;
     217        -webkit-transform: translateX(200%);
     218        -moz-transform: translateX(200%);
     219        -ms-transform: translateX(200%);
     220        -o-transform: translateX(200%);
     221        transform: translateX(200%);
     222    }
     223    to {
     224        opacity: 1;
     225        -webkit-transform: translateX(0%);
     226        -moz-transform: translateX(0%);
     227        -ms-transform: translateX(0%);
     228        -o-transform: translateX(0%);
     229        transform: translateX(0%);
     230    }
     231}
     232@-webkit-keyframes moveFromRight {
     233    from {
     234        opacity: 0;
     235        -webkit-transform: translateX(-200%);
     236        -moz-transform: translateX(-200%);
     237        -ms-transform: translateX(-200%);
     238        -o-transform: translateX(-200%);
     239        transform: translateX(-200%);
     240    }
     241    to {
     242        opacity: 1;
     243        -webkit-transform: translateX(0%);
     244        -moz-transform: translateX(0%);
     245        -ms-transform: translateX(0%);
     246        -o-transform: translateX(0%);
     247        transform: translateX(0%);
     248    }
     249}
     250
     251.hoo-animation li ul,
     252.hoo-animation li ul li ul {
     253  position: absolute;
     254  height: auto;
     255  min-width: 200px;
     256  padding: 0;
     257  margin: 0;
     258  background: #FFF;
     259  opacity: 0;
     260  visibility: hidden;
     261  transition: all 300ms linear;
     262  -o-transition: all 300ms linear;
     263  -ms-transition: all 300ms linear;
     264  -moz-transition: all 300ms linear;
     265  -webkit-transition: all 300ms linear;
     266  z-index: 1000;
     267  left:280px;
     268  top: 0px;
     269  border-left: 4px solid #e67e22;
     270}
     271.hoo-animation li ul:before {
     272  content: "";
     273  position: absolute;
     274  top: 25px;
     275  left: -9px;
     276  border-right: 5px solid #e67e22;
     277  border-bottom: 5px solid transparent;
     278  border-top: 5px solid transparent;
     279}
     280.hoo-animation li:hover > ul,
     281.hoo-animation li ul li:hover > ul {
     282  display: block;
     283  opacity: 1;
     284  visibility: visible;
     285  left:250px;
     286}
     287
     288.hoo-animation li ul li a {
     289  padding: 10px;
     290  text-align: left;
     291  border: 0;
     292  border-bottom: 1px solid #EEE;
     293  height: auto;
     294}
     295.hoo-animation li ul li a i {
     296  font-size: 16px;
     297  display: inline-block;
     298  margin: 0 10px 0 0;
     299}
     300.hoo-animation li ul li ul {
     301  left: 230px;
     302  top: 0;
     303  border: 0;
     304  border-left: 4px solid #e67e22;
     305} 
     306.hoo-animation li ul li ul:before {
     307  content: "";
     308  position: absolute;
     309  top: 15px;
     310  left: -9px;
     311  border-right: 5px solid #e67e22;
     312  border-bottom: 5px solid transparent;
     313  border-top: 5px solid transparent;
     314}
     315.hoo-animation li ul li:hover > ul {
     316  top: 0px;
     317  left: 200px;
     318}
     319
     320.hoo-animation li a.search {
     321  padding: 10px 10px 15px 10px;
     322  clear: both;
     323}
     324.hoo-animation li a.search i {
     325  margin: 0;
     326  display: inline-block;
     327  font-size: 18px;
     328}
     329.hoo-animation li a.search input {
     330  border: 1px solid #EEE;
     331  padding: 10px;
     332  background: #FFF;
     333  outline: none;
     334  color: #777;
     335  width:170px;
     336  float:left;
     337}
     338.hoo-animation li a.search button {
     339  border: 1px solid #e67e22;
     340  background: #e67e22;
     341  outline: none;
     342  color: #FFF;
     343  margin-left: -4px;
     344  float:left;
     345  padding: 10px 10px 11px 10px;
     346}
     347.hoo-animation li a.search input:focus {
     348  border: 1px solid #e67e22;
     349}
     350
     351.search-mobile {
     352    display:none !important;
     353    background:#e67e22;
     354    border-left:1px solid #e67e22;
     355    border-radius:0 3px 3px 0;
     356}
     357.search-mobile i {
     358    color:#FFF;
     359    margin:0 !important;
     360}
     361
     362@media only screen and (min-width: 960px) and (max-width: 1199px) {
     363    .hoo-animation {
     364        margin-left:10px;
     365    }
     366}
     367
     368@media only screen and (min-width: 768px) and (max-width: 959px) {
     369    .hoo-animation {
     370        width: 200px;
     371    }
     372    .hoo-animation li a {
     373        height:30px;
     374    }
     375    .hoo-animation li a i {
     376        font-size: 22px;
     377    }
     378    .hoo-animation li a strong {
     379        font-size: 12px;
     380    }
     381    .hoo-animation li a small {
     382        font-size: 10px;
     383    }   
     384    .hoo-animation li a.search input {
     385        width: 120px;
     386        font-size: 12px;
     387    }
     388    .hoo-animation li a.search buton{
     389        padding: 8px 10px 9px 10px;
     390    }
     391    .hoo-animation li > ul {
     392        min-width:180px;
     393    }
     394    .hoo-animation li:hover > ul {
     395        min-width:180px;
     396        left:200px;
     397    }
     398    .hoo-animation li ul li > ul, .hoo-animation li ul li ul li > ul {
     399        min-width:150px;
     400    }
     401    .hoo-animation li ul li:hover > ul {
     402        left:180px;
     403        min-width:150px;
     404    }
     405    .hoo-animation li ul li ul li:hover > ul {
     406        left:150px;
     407        min-width:150px;
     408    }
     409    .hoo-animation li ul a {
     410        font-size:12px;
     411    }
     412    .hoo-animation li ul a i {
     413        font-size:14px;
     414    }
     415}
     416
     417@media only screen and (min-width: 480px) and (max-width: 767px) {
     418   
     419    .hoo-animation {
     420        width: 50px;
     421    }
     422    .hoo-animation li a {
     423        position: relative;
     424        padding: 12px 16px;
     425        height:20px;
     426    }
     427    .hoo-animation li a small {
     428        display: none;
     429    }
     430    .hoo-animation li a strong {
     431        display: none;
     432    }
     433    .hoo-animation li a:hover strong,.hoo-animation li.active > a strong {
     434        display:block;
     435        font-size:10px;
     436        padding:3px 0;
     437        position:absolute;
     438        bottom:0px;
     439        left:0;
     440        background:#e67e22;
     441        color:#FFF;
     442        min-width:100%;
     443        text-transform:lowercase;
     444        font-weight:normal;
     445        text-align:center;
     446    }
     447    .hoo-animation li .search {
     448        display: none;
     449    }
     450   
     451    .hoo-animation li > ul {
     452        min-width:180px;
     453        left:70px;
     454    }
     455    .hoo-animation li:hover > ul {
     456        min-width:180px;
     457        left:50px;
     458    }
     459    .hoo-animation li ul li > ul, .hoo-animation li ul li ul li > ul {
     460        min-width:150px;
     461    }
     462    .hoo-animation li ul li:hover > ul {
     463        left:180px;
     464        min-width:150px;
     465    }
     466    .hoo-animation li ul li ul li > ul {
     467        left:35px;
     468        top: 45px;
     469        border:0;
     470        border-top:4px solid #e67e22;
     471    }
     472    .hoo-animation li ul li ul li > ul:before {
     473        left:30px;
     474        top: -9px;
     475        border:0;
     476        border-bottom:5px solid #e67e22;
     477        border-left:5px solid transparent;
     478        border-right:5px solid transparent;
     479    }
     480    .hoo-animation li ul li ul li:hover > ul {
     481        left:30px;
     482        min-width:150px;
     483        top: 35px;
     484    }
     485    .hoo-animation li ul a {
     486        font-size:12px;
     487    }
     488    .hoo-animation li ul a i {
     489        font-size:14px;
     490    }
     491   
     492}
     493
     494@media only screen and (max-width: 479px) {
     495    .hoo-animation {
     496        width: 50px;
     497    }
     498    .hoo-animation li a {
     499        position: relative;
     500        padding: 12px 16px;
     501        height:20px;
     502    }
     503    .hoo-animation li a small {
     504        display: none;
     505    }
     506    .hoo-animation li a strong {
     507        display: none;
     508    }
     509    .hoo-animation li a:hover strong,.hoo-animation li.active > a strong {
     510        display:block;
     511        font-size:10px;
     512        padding:3px 0;
     513        position:absolute;
     514        bottom:0px;
     515        left:0;
     516        background:#e67e22;
     517        color:#FFF;
     518        min-width:100%;
     519        text-transform:lowercase;
     520        font-weight:normal;
     521        text-align:center;
     522    }
     523    .hoo-animation li .search {
     524        display: none;
     525    }
     526   
     527    .hoo-animation li > ul {
     528        min-width:180px;
     529        left:70px;
     530    }
     531    .hoo-animation li:hover > ul {
     532        min-width:180px;
     533        left:50px;
     534    }
     535    .hoo-animation li ul li > ul, .hoo-animation li ul li ul li > ul {
     536        min-width:150px;
     537    }
     538    .hoo-animation li ul li:hover > ul {
     539        left:180px;
     540        min-width:150px;
     541    }
     542    .hoo-animation li ul li ul li > ul {
     543        left:35px;
     544        top: 45px;
     545        border:0;
     546        border-top:4px solid #e67e22;
     547    }
     548    .hoo-animation li ul li ul li > ul:before {
     549        left:30px;
     550        top: -9px;
     551        border:0;
     552        border-bottom:5px solid #e67e22;
     553        border-left:5px solid transparent;
     554        border-right:5px solid transparent;
     555    }
     556    .hoo-animation li ul li ul li:hover > ul {
     557        left:30px;
     558        min-width:150px;
     559        top: 35px;
     560    }
     561    .hoo-animation li ul a {
     562        font-size:12px;
     563    }
     564    .hoo-animation li ul a i {
     565        font-size:14px;
     566    }
     567   
     568}

  • sidebar-menu/trunk/includes/Classes/Config.class.php

    r2795894 r2796048  
    66    public static function get_front_scripts() {
    77
    8         $min_suffix = WP_DEBUG ? '' : '.min';
     8        $min_suffix = WP_DEBUG ? '' : '';
    99        $return = [
    1010                'styles'=>  ['sidebarmenu-main' => [SIDEBAR_MENU_DIR_URL.'assets/css/main'.$min_suffix.'.css', '', SIDEBAR_MENU_VER, false ],
    … …  
    1919    public static function get_admin_scripts() {
    2020
    21         $min_suffix = WP_DEBUG ? '' : '.min';
     21        $min_suffix = WP_DEBUG ? '' : '';
    2222        $return = [
    2323                'scripts' => [

  • sidebar-menu/trunk/includes/Classes/Helper.class.php

    r2795894 r2796048  
    101101
    102102        $menu_class = '';
     103        $link_before = '';
     104        $link_after = '';
     105        $walker = '';
    103106        switch($options['style']){
    104107            case "normal":
    … …  
    108111                $menu_class .= ' nav hoo-sidenav';
    109112                break;
     113            case "animation":
     114                $menu_class .= ' hoo-animation';
     115                $link_before = '<strong>';
     116                $link_after = '</strong>';
     117                $walker = new Description_Walker;
     118                break;
    110119        }
    111120
    112         $menu = wp_nav_menu(['echo'=>false, 'menu' => $options['menu'], 'menu_class' => $menu_class]);
     121        $menu = wp_nav_menu(['echo'=>false, 'menu' => $options['menu'], 'menu_class' => $menu_class,'link_before' => $link_before, 'link_after' => $link_after,'walker' => $walker]);
    113122
    114123        $sidebarmenu = '<div class="sidebar-menu sidebarmenu-'.$options['style'].'">'.$menu.'</div>';
    … …  
    121130
    122131        if($options['color'] !='') $custom_css .= ".sidebar-menu a{color: ".esc_attr($options['color']).";}";
    123         if($options['coloractive'] !='') $custom_css .= ".sidebar-menu .nav > .active:focus > a, .sidebar-menu .nav > .active:hover > a, .sidebar-menu .nav > .active > a {color: ".esc_attr($options['coloractive']).";border-left: 2px solid ".esc_attr($options['coloractive']).";}.sidebar-menu li.active a, .sidebar-menu li a:hover{color: ".esc_attr($options['coloractive']).";}";
     132        if($options['coloractive'] !='') {
     133            switch($options['style']){
     134                case "normal":
     135                case "classic":
     136                    $custom_css .= ".sidebar-menu .nav > .active:focus > a, .sidebar-menu .nav > .active:hover > a, .sidebar-menu .nav > .active > a {color: ".esc_attr($options['coloractive']).";border-left: 2px solid ".esc_attr($options['coloractive']).";}.sidebar-menu li.active a, .sidebar-menu li a:hover{color: ".esc_attr($options['coloractive']).";}";
     137                    break;
     138                case "animation":
     139                    $custom_css .= ".hoo-animation li:hover > a,.hoo-animation li.active > a{color: ".esc_attr($options['coloractive']).";}.hoo-animation li.active > a {border-left: 4px solid ".esc_attr($options['coloractive'])."; border-right: 4px solid ".esc_attr($options['coloractive']).";}.hoo-animation li.active > a:before{border-left: 5px solid ".esc_attr($options['coloractive']).";}.hoo-animation li.active > a:after {border-right: 5px solid ".esc_attr($options['coloractive']).";}.hoo-animation li ul li ul li > ul:before {border-bottom:5px solid ".esc_attr($options['coloractive']).";}.hoo-animation li ul li ul li > ul:before {border-bottom:5px solid ".esc_attr($options['coloractive']).";}.hoo-animation li ul, .hoo-animation li ul li ul { border-left: 4px solid ".esc_attr($options['coloractive']).";}.hoo-animation li ul:before,.hoo-animation li ul li ul:before{border-right: 5px solid ".esc_attr($options['coloractive']).";}";
     140                    break;
     141            }
     142   
     143        }
    124144
    125145        if($custom_css) wp_add_inline_style( 'sidebarmenu-main', $custom_css );

  • sidebar-menu/trunk/includes/meta-boxes.php

    r2795894 r2796048  
    2222        ],
    2323        [
    24             'value' => 'toggle-left',
    25             'label' => __( 'Toggle Button on Left', 'sidebar-menu' ),
    26             'disable'   => 'true',
     24            'value' => 'animation',
     25            'label' => __( 'Animation', 'sidebar-menu' ),
     26            'disable'   => '',
    2727        ],
    2828       

  • sidebar-menu/trunk/readme.txt

    r2795894 r2796048  
    55Tested up to: 6.0
    66Requires PHP: 7.0
    7 Stable tag: 1.0.0
     7Stable tag: 1.0.1
    88License: GPLv3
    99License URI: https://www.gnu.org/licenses/gpl-3.0.html
    … …  
    2828
    2929== Screenshots ==
    30 
     301. Style - Classic
     312. Style - Animation
    3132
    3233== Changelog ==
    3334
    34 
     35= 1.0.1 - 2022-10-09 =
     36* Tweak: Added a new style - Animation

  • sidebar-menu/trunk/sidebar-menu.php

    r2795894 r2796048  
    44  Plugin URI: https://www.hoosoft.com/plugins/sidebar-menu/
    55  Description: A sidebar menu allows you to organize information vertically, it is a part of a web page that makes it easy to place navigation or display links to help customers find important information easily. Also, it improves the availability area of the site.
    6   Version: 1.0.0
     6  Version: 1.0.1
    77  Author: Hoosoft
    88  Author URI: http://www.hoosoft.com
Note: See TracChangeset for help on using the changeset viewer.