Jak wykonać 2 kolumny w menu wordpress?

źródło: http://www.prowebdesign.ro/wordpress-sub-menu-items-split-in-2-columns-the-easy-way/

WordPress sub-menu items split in 2 columns. The easy way.

Let’s say you have a long list of items in one of your WordPress sub-menu drop downs. It is often the case with Products or Services sections of the site. So, you probably want those sub-menu items to be split in 2 columns. But you want 2 columns only in certain sub-menus, and you don’t want to overly complicate things with a mega-menu WP plugin. Well, there is an easy way to achieve this using flexibility and power of WP menus, and CSS :nth-child() selector.

This is what we will be making:

2columns-subsYour menu may look different from the picture, it doesn’t matter. What we are looking for are the two columns of sub-items in the drop down. The solution fits for any theme design. What you should have, though, is the WP Navigation Menu, created by you in Appearance -> Menus. Not an auto-generated list of pages. This is the only must.

Say, you have your main menu in place, and you have some 12 sub-items for the Products menu item. Here’s how you split them in 2 columns in your sub-menu:

2columns-menu1. Go to Appearance -> Menus and select the menu you want to edit.

2. Type sub-menu-columns in the top menu item CSS Classes (optional) field. In our case – it’s the Products. See image for help.
If you don’t see CSS Classes (optional) field in the menu item box, then click Screen Options at the top right corner of the screen and check CSS Classes checkbox.

3. Click SAVE MENU button.

4. WordPress assigns class sub-menu to the ul that holds sub-item li-s. In your CSS find (or add) .sub-menu selector and add this line to declaration: width: 410px;. You can set width to anything you want, actually.

5. Then add this block of CSS to your stylesheet:

01
02
03
04
05
06
07
08
09
10
11
12
.sub-menu-columns ul.sub-menu li {
    display: inline-block;
    float: left;
    width: 200px;
}
.sub-menu-columns ul.sub-menu li:nth-child(odd) {
    float: left;
    margin-right: 10px;
}
.sub-menu-columns ul.sub-menu li:nth-child(even) {
    float: right;
}

You may want to tweak the widths, of course, or add some fancy styling. But the general idea is that simple: float odd children left, float even children right, give them widths so they don’t stray. Remember to set width of the sub-menu ul to the sum of li widths plus margin.

element graficzny na końcu dokumentu

HTML:

Click me

CSS:

.button {
padding: 15px 50px 15px 15px;
color: #fff;
text-decoration: none;
display: inline-block;
position: relative;
}

.button:after {
content: „”;
width: 30px;
height: 30px;
background: url(„http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png”) no-repeat -30px -50px no-scroll;
background-color: red;
top: 10px;
right: 5px;
position: absolute;
display: inline-block;
}

.green {
background-color: #8ce267;
}

prosty pop-up, simple pop-up

źródło:
Part 1

Adding the Code

  1. Image titled 4695952 1
    1

    Add this code inside the head tag of your web page:

    • <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
      
    • The above code will refer to the online library available. If your web page is not running online, then you must download the jquery library and link it to your webpage.
  2. Image titled 4695952 2
    2

    Add the popup HTML code to your webpage. Make sure it’s above the close body tag.

    • <body>
       
      <div> <!-- website content start -->
       
      </div>  <!-- website content ends -->
       
      <div class="popup"> <!-- popup content start || copy this to the end of the file-->
              <div class="popupWindow">
                      <div class="popup_txt">
                              Are you 18 years of age or older?
                      </div>
                      <div class="popup_img">
                              <img src="yes.png" class="popup_img_yes"/>
                              <img src="no.png" class="popup_img_no"/>
                      </div>
              </div>
      </div>  <!-- popup content ends -->
       
      </body>
      
    • All the divs are separate containers where we refer them individually by the id and class names.
  3. Image titled 4695952 3
    3

    Add this CSS inside the style tag.

    • <style>
       
      .popup{
      position:fixed;
      width:100%;
      height:100%;
      left:0px;
      right:0px;
      top: 0px;
      bottom:0px;
      background-color:rgba(3,3,3,0.8);
      }
       
      .popupWindow{
      background-color:white;
      margin:0px auto;
      width:40%;
      min-width:400px;
      min-height:300px;
      margin-top:12%;
      text-align: center;
      -moz-border-radius: 50px 50px / 50px 50px;
      border-radius: 50px 50px / 50px 50px;
      box-shadow: 10px 10px 5px #000;
      }
       
      .popup_txt{
      font-size:26px;
      font-weight:bold;
      margin:10px;
      padding-top:100px;
      color:green;
      }
       
      .popup_img{
      maring:10px;
      }
       
      .popup_img_yes,.popup_img_no{
      margin:20px;
      }
       
      </style>
      
    • The CSS is applied to the div elements by referring to their id and class names. The id is referred by #idName and class is referred by .className
  4. Image titled 4695952 4
    4

    Add these jquery scripts in your webpage inside head tag. All script must be written inside script tag.

    <script>
     
    $(document).ready(function(){
     
        $( ".popup_img_yes" ).click(function() {
                    $( ".popup" ).fadeOut( 1200 );
      });
     
      $( ".popup_img_no" ).click(function() {
                    window.open("https://www.google.com","_self");
      });
     
    });
     
    </script>
    
  5. Image titled 4695952 5
    5

    Know how it works. The jquery is used to handle the click event on the „yes” and „no” button and their corresponding action.

    • If yes is clicked .fadeOut( 1200 ) method is called; here the popup will fade out in 1.2 seconds.
    • If no is clicked the page is reloaded with the URL google.com using the function window.open. The attribute „_self” indicate that the url is loaded in the same tab.

każdy element listy w innym kolorze

li:nth-child(1) a { border-color: #636393; }
li:nth-child(2) a { border-color: #B5222D; }
li:nth-child(3) a { border-color: #D4953C; }
li:nth-child(4) a { border-color: #609491; }
li:nth-child(5) a { border-color: #87A248; }

 

lub

li a { border-color: #636393; }
li+li a { border-color: #B5222D; }
li+li+li a { border-color: #D4953C; }
li+li+li+li a { border-color: #609491; }
li+li+li+li+li a{ border-color: #87A248; }

Wysuwany aplet

https://webmastah.pl/wysuwany-widget-na-strone/

html

class=„slideout-widget widget-facebook”>

class=„slideout-widget-handler”>
class=„icon-facebook”>

class=„slideout-widget-content”>

</div>

CSs


.slideout-widget {
 position: fixed;
 right: -15em;
 top: 50%;
 transition: right .4s;
 width: 15em;
 z-index: 10;
}
 
.slideout-widget:hover {
 right: 0;
}
 
.slideout-widget-handler,
.slideout-widget-content {
 background: #eee;
 border: 1px solid #ddd;
 padding: 1em .5em;
}
 
.slideout-widget-handler {
 border-right: none;
 left: -3em;
 position: absolute;
 text-align: center;
 width: 3em;
}
.slideout-widget-content {
 border-width: 1px 0;
 overflow: hidden;
 width: 100%;
 z-index: 11;
}

ostylowanie pojedynczych

.widget-facebook .slideout-widget-handler,
.widget-facebook .slideout-widget-content {
 background: #3c5b9b;
 border: none;
}
 
.widget-facebook,
.widget-facebook a {
 color: #fff;
}

Responsywne tabele

Accessible, Simple, Responsive Tables

Approaches for Responsive Tables

Let’s think about the different ways a table could behave responsively:

Squash: If columns have little content they might squash horizontally with no issues on a mobile screen so not changing the layout needs to be a valid option.
Vertical scroll: If the layout and content is exact and critical, a user could scroll to the left or right. This is trivial in CSS with an overflow=”auto” wrapper.
Collapse by rows: Split each row into its own single column mini-table on small screens. Switching display:table into display:block will cause this with normal table markup.
Collapse by columns: This is where things get tricky. You can’t do this with normal table markup in pure CSS because the code order is by rows and the
wrappers lock it in. We either have to change the markup or start manipulating with JavaScript.