Beiträge von BlackBurn

<?php
/**
 * Server-side rendering of the `core/rss` block.
 *
 * @package WordPress
 */


/**
 * Renders the `core/rss` block on server.
 *
 * @param array $attributes The block attributes.
 *
 * @return string Returns the block content with received rss items.
 */
function render_block_core_rss( $attributes ) {
   $rss = fetch_feed( $attributes['feedURL'] );


   if ( is_wp_error( $rss ) ) {
       return '<div class="components-placeholder"><div class="notice notice-error"><strong>' . __( 'RSS Error:' ) . '</strong> ' . $rss->get_error_message() . '</div></div>';
   }


   if ( ! $rss->get_item_quantity() ) {
       // PHP 5.2 compatibility. See: http://simplepie.org/wiki/faq/i_m_getting_memory_leaks.
       $rss->__destruct();
       unset( $rss );


       return '<div class="components-placeholder"><div class="notice notice-error">' . __( 'An error has occurred, which probably means the feed is down. Try again later.' ) . '</div></div>';
   }


   $rss_items  = $rss->get_items( 0, $attributes['itemsToShow'] );
   $list_items = '';
   foreach ( $rss_items as $item ) {
       $title = esc_html( trim( strip_tags( $item->get_title() ) ) );
       if ( empty( $title ) ) {
           $title = __( '(no title)' );
       }
       $link = $item->get_link();
       $link = esc_url( $link );
       if ( $link ) {
           $title = "<a href='{$link}'>{$title}</a>";
       }
       $title = "<div class='wp-block-rss__item-title'>{$title}</div>";


       $date = '';
       if ( $attributes['displayDate'] ) {
           $date = $item->get_date( 'U' );


           if ( $date ) {
               $date = sprintf(
                   '<time datetime="%1$s" class="wp-block-rss__item-publish-date">%2$s</time> ',
                   date_i18n( get_option( 'c' ), $date ),
                   date_i18n( get_option( 'date_format' ), $date )
               );
           }
       }


       $author = '';
       if ( $attributes['displayAuthor'] ) {
           $author = $item->get_author();
           if ( is_object( $author ) ) {
               $author = $author->get_name();
               $author = '<span class="wp-block-rss__item-author">' . __( 'by' ) . ' ' . esc_html( strip_tags( $author ) ) . '</span>';
           }
       }


       $excerpt = '';
       if ( $attributes['displayExcerpt'] ) {
           $excerpt = html_entity_decode( $item->get_description(), ENT_QUOTES, get_option( 'blog_charset' ) );
           $excerpt = esc_attr( wp_trim_words( $excerpt, $attributes['excerptLength'], ' [&hellip;]' ) );


           // Change existing [...] to [&hellip;].
           if ( '[...]' === substr( $excerpt, -5 ) ) {
               $excerpt = substr( $excerpt, 0, -5 ) . '[&hellip;]';
           }


           $excerpt = '<div class="wp-block-rss__item-excerpt">' . esc_html( $excerpt ) . '</div>';
       }


       $list_items .= "<li class='wp-block-rss__item'>{$title}{$date}{$author}{$excerpt}</li>";
   }


   $class = 'wp-block-rss';
   if ( isset( $attributes['align'] ) ) {
       $class .= ' align' . $attributes['align'];
   }


   if ( isset( $attributes['blockLayout'] ) && 'grid' === $attributes['blockLayout'] ) {
       $class .= ' is-grid';
   }


   if ( isset( $attributes['columns'] ) && 'grid' === $attributes['blockLayout'] ) {
       $class .= ' columns-' . $attributes['columns'];
   }


   if ( isset( $attributes['className'] ) ) {
       $class .= ' ' . $attributes['className'];
   }


   $list_items_markup = "<ul class='{$class}'>{$list_items}</ul>";


   // PHP 5.2 compatibility. See: http://simplepie.org/wiki/faq/i_m_getting_memory_leaks.
   $rss->__destruct();
   unset( $rss );


   return $list_items_markup;
}


/**
 * Registers the `core/rss` block on server.
 */
function register_block_core_rss() {
   register_block_type(
       'core/rss',
       array(
           'attributes'      => array(
               'align'          => array(
                   'type' => 'string',
                   'enum' => array( 'left', 'center', 'right', 'wide', 'full' ),
               ),
               'className'      => array(
                   'type' => 'string',
               ),
               'columns'        => array(
                   'type'    => 'number',
                   'default' => 2,
               ),
               'blockLayout'    => array(
                   'type'    => 'string',
                   'default' => 'list',
               ),
               'feedURL'        => array(
                   'type'    => 'string',
                   'default' => '',
               ),
               'itemsToShow'    => array(
                   'type'    => 'number',
                   'default' => 5,
               ),
               'displayExcerpt' => array(
                   'type'    => 'boolean',
                   'default' => false,
               ),
               'displayAuthor'  => array(
                   'type'    => 'boolean',
                   'default' => false,
               ),
               'displayDate'    => array(
                   'type'    => 'boolean',
                   'default' => false,
               ),
               'excerptLength'  => array(
                   'type'    => 'number',
                   'default' => 55,
               ),
           ),
           'render_callback' => 'render_block_core_rss',
       )
   );
}
add_action( 'init', 'register_block_core_rss' );

<html><style><body> {


}


* {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  box-sizing: border-box;
}


nav2 {
  position: absolute;
  width: 100%;
  background: #2a2a2a;
   height: 58px;
  font-size: 16px;
  box-shadow: 0 0 10px rgba(0,0,0,1);
}


/* first stage */


nav2 > ul {
  position: relative;
  display: flex;
  justify-content: center;
  width: 1200px;
  margin: 0 auto;
  padding: 0;
}


nav2 a {
  display: block;
  color: #fff;
  text-decoration: none;
}


nav2 ul li {
  color: #fff;
  list-style: none;
  transition: 0.5s;
}


nav2 > ul > li > a {
  padding: 15px 25px;
}


nav2 ul > li.submenu > a:after {
  position: relative;
  float: right;
  content: '';
  margin-left: 10px;
  margin-top: 8px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  border-bottom: 5px solid transparent;
}


nav2 ul > li.submenu:hover > a:after {
  margin-top: 2px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid #fff;
}


nav2 > ul > li:hover {
  background: #4096ee;
}


/* second stage (the mega-menu) */


nav2 ul.megamenu2 {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  width: 1200px;
  top: -9999px;
  left: 0;
  padding: 40px 40px 0 40px;
  background: #fff;
  text-align: left;
  border-top: 5px solid #4096ee;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
  z-index: 1;
}


nav2 ul li:hover ul.megamenu2 {
  top: 100%;
}


/* third stage (child-menus in the mega-menu) */


nav2 ul.megamenu2 ul {
  width: 25%;
  margin-bottom: 40px;
  color: #000;
  box-shadow: none;
}


nav ul.megamenu2 h4 {
  margin-bottom: 15px;
  text-transform: uppercase;
}


nav2 ul.megamenu2 ul li {
  display: block;
}


nav2 ul.megamenu2 ul li a {
  margin-top: 10px;
  transition: 0.5s;
  color: #000;
}


nav2 ul.megamenu2 ul li a:hover {
  color: #4096ee;
}</style>


<nav2>
  <ul>
    <li><a href="#">Home</a></li>
    <li class="submenu"><a href="#" title="Unser Produktsortiment">Produkte</a>
      <ul class="megamenu2">
        <ul>
          <h4>Arbeitsspeicher</h4>
          <li><a href="#">DDR</a></li>
          <li><a href="#">DDR2</a></li>
          <li><a href="#">DDR3</a></li>
          <li><a href="#">DDR4</a></li>
          <li><a href="#">Notebookspeicher</a></li>
          <li><a href="#">Sonstiger Speicher</a></li>
        </ul>
        <ul>
          <h4>Festplatten</h4>
          <li><a href="#">Interne Festplatten</a></li>
          <li><a href="#">Externe Festplatten</a></li>
          <li><a href="#">SSD (Solid State Drive)</a></li>
        </ul>
        <ul>
          <h4>Gehäuse und Netzteile</h4>
          <li><a href="#">PC-Gehäuse</a></li>
          <li><a href="#">Festplattengehäuse</a></li>
          <li><a href="#">Netzteile</a></li>
          <li><a href="#">Kühler</a></li>
          <li><a href="#">Zubehör</a></li>
        </ul>
        <ul>
          <h4>Grafikkarten</h4>
          <li><a href="#">AMD</a></li>
          <li><a href="#">Nvidia</a></li>
          <li><a href="#">Sonstige</a></li>
          <li><a href="#">Kühler</a></li>
          <li><a href="#">Zubehör</a></li>
        </ul>
      </ul>
    </li>
    <li><a href="#">Über uns</a></li>
    <li><a href="#">Kontakt</a></li>
    <li><a href="#">Impressum</a></li>
  </ul>
</nav></body></html>

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
  box-sizing: border-box;
}


body {
  margin: 0;
}


.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial, Helvetica, sans-serif;
}


.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


.dropdown {
  float: left;
  overflow: hidden;
}


.dropdown .dropbtn {
    cursor: pointer;
  font-size: 16px; 
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font: inherit;
  margin: 0;
}


.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}


.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}


.dropdown-content .header {
  background: red;
  padding: 3px;
  color: white;
}


.dropdown:hover .dropdown-content {
  display: block;
}


/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  background-color: #ccc;
  height: 350px;
}


.column a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}


.column a:hover {
  background-color: #ddd;
}


/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    height: auto;
  }
}
</style>
</head>
<body>


<div class="navbar">


  <div class="dropdown">
    <button class="dropbtn" onclick="myFunction()">SpielerTreffpunkt.de
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <div class="header">
      </div>  
      <div class="row">
        <div class="column">
          <h3>Aktuelle Games</h3>
          <a href="#">Cyberpunk 2077</a>
          <a href="#">Apex Legends</a>
          <a href="#">Call Of Duty</a>
         <a href="#">Anno 1800</a>
         <a href="#">Formel 1 2020</a>
        </div>
        <div class="column">
          <h3>Infoseiten</h3>
          <a href="#">Kontakt</a>
          <a href="#">FAQ</a>
          <a href="#">Impressum</a>
        </div>
                 <div class="column">
        </div>
      </div>
    </div>
  </div>
</div>


<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}


// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {
  var myDropdown = document.getElementById("myDropdown");
    if (myDropdown.classList.contains('show')) {
      myDropdown.classList.remove('show');
    }
  }
}
</script>
</body>
</html>