This Joomla 4 override allows you to display your articles from several categories in a menu restaurant style simply using Joomla's mod_articles_category module. At the bottom of this article, you can download the files of the override.

Joomla 4 frontend rendering

PhP markup

<?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_articles_category
 * @author		web-eau.net
 * @copyright   (C) 2010 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

use Joomla\CMS\Helper\ModuleHelper;
use Joomla\CMS\Language\Text;

if (!$list)
{
	return;
}

?>

<div class="category-module<?php echo $moduleclass_sfx; ?>">
	
	<?php if ($grouped) : ?>
	<?php foreach ($list as $group_name => $group) : ?>
	<section class="about-area pt-60">
		<div class="container">	    
			<div class="row">
				<div class="col-xl-12 mb-60">
					<div class="section-title-menu text-center">
						<h4><?php echo $group_name; ?></h4> 
					</div>
				</div>
			</div>
			
			<div class="row menu_style mb-5">
				
				<?php foreach ($group as $item) : ?>
				
				<div class="col-md-6 pb-3">
					<div class="single_menu_list">
						<?php
							$article_images  = json_decode($item->images);
							$article_image   = '';
							$article_image_alt   = '';
							if(isset($article_images->image_intro) && !empty($article_images->image_intro)) {
								$article_image  = $article_images->image_intro;
								$article_image_alt  = $article_images->image_intro_alt;
							}?>  					
							
							<img class="" src="<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
							
							<?php $item->urls = new JRegistry($item->urls); ?>
							<div class="menu_content">
								<h4><?php echo $item->title; ?> <span> <?php echo $item->urls->get('urlatext'); ?></span></h4> 
								<p class="mod-articles-category-introtext">
									<?php echo $item->displayIntrotext; ?>
								</p>					
							</div>
					</div>
				</div>
				<?php endforeach; ?>
				
			</div>
		</div>
	</section>	
	<?php endforeach; ?>
	
	<?php else : ?>
	
	<?php foreach ($list as $item) : ?>
	<div class="col-md-4">
		<div class="single_menu_list">
			<?php
				$article_images  = json_decode($item->images);
				$article_image   = '';
				$article_image_alt   = '';
				if(isset($article_images->image_intro) && !empty($article_images->image_intro)) {
					$article_image  = $article_images->image_intro;
					$article_image_alt  = $article_images->image_intro_alt;
				}?>  					
				
				<img class="" src="<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
				
				<?php $item->urls = new JRegistry($item->urls); ?>
				<div class="menu_content">
					<h4><?php echo $item->title; ?> <span> <?php echo $item->urls->get('urlatext'); ?></span></h4> 
					<p class="mod-articles-category-introtext">
						<?php echo $item->displayIntrotext; ?>
					</p>					
				</div>
		</div>
	</div>
	<?php endforeach; ?>	
	<?php endif; ?>
</div>

CSS

.pt-100{
    padding-top:100px;
}
.pb-100{
    padding-top:100px;
}
.mb-60 {
	margin-bottom: 60px;
}
.section-title-menu p {
	font-size: 24px;
	font-family: Oleo Script;
	margin-bottom: 0px;
	margin-top:50px;
}
.section-title-menu h4 {
	font-size: 40px;
	text-transform: capitalize;
	color: tomato;
	position: relative;
	display: inline-block;
	padding-bottom: 25px;
}
.section-title-menu h4::before {
	width: 80px;
	height: 1.5px;
	bottom: 0;
	left: 50%;
	margin-left: -40px;
}
.section-title-menu h4::before, .section-title-menu h4::after {
	position: absolute;
	content: "";
	background-color: tomato;
}
.single_menu_list img {
	max-width: 30%;
	position: absolute;
	left: 0px;
	top: 0;
	border: 1px solid #ddd;
	padding: 3px;
	border-radius: 50%;
	transition: .4s;
}
.menu_style .single_menu_list img {
	position: static;
	width: 100%;
	display: block;
	margin: 0 auto;
	margin-bottom: 45px;
}
.single_menu_list h4 {
	font-size: 20px;
	border-bottom: 1px dashed #333;
	padding-bottom: 15px;
	margin-bottom: 10px;
}
.single_menu_list h4 span {
	float: right;
	font-weight: bold;
	color: tomato;
	font-style: italic;
}
.menu_style .single_menu_list {
	text-align: center;
}
.single_menu_list:hover img {
	border-radius: 0;
	transition: .4s;
}

This Joomla 3 override allows you to display your articles from several categories in a menu restaurant style simply using Joomla's mod_articles_category module. At the bottom of this article, you can download the files of the override.

Joomla 3 frontend rendering

PhP markup

<?php
	/**
		* @package     Joomla.Site
		* @subpackage  mod_articles_category
		* @Author	   web-eau.net
		* @copyright   Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
		* @license     GNU General Public License version 2 or later; see LICENSE.txt
	*/
	
	defined('_JEXEC') or die;
	
?>

<div class="category-module<?php echo $moduleclass_sfx; ?>">
	
	<?php if ($grouped) : ?>
	<?php foreach ($list as $group_name => $group) : ?>
	<section class="about-area pt-60">
		<div class="container">	    
			<div class="row">
				<div class="col-xl-12 mb-60">
					<div class="section-title-menu text-center">
						<h4><?php echo $group_name; ?></h4> 
					</div>
				</div>
			</div>
			
			<div class="row menu_style">
				
				<?php foreach ($group as $item) : ?>
				
				<div class="col-md-4">
					<div class="single_menu_list">
						<?php
							$article_images  = json_decode($item->images);
							$article_image   = '';
							$article_image_alt   = '';
							if(isset($article_images->image_intro) && !empty($article_images->image_intro)) {
								$article_image  = $article_images->image_intro;
								$article_image_alt  = $article_images->image_intro_alt;
							}?>  					
							
							<img class="" src="/<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
							
							<?php $item->urls = new JRegistry($item->urls); ?>
							<div class="menu_content">
								<h4><?php echo $item->title; ?> <span> <?php echo $item->urls->get('urlatext'); ?></span></h4> 
								<p class="mod-articles-category-introtext">
									<?php echo $item->displayIntrotext; ?>
								</p>					
							</div>
					</div>
				</div>
				<?php endforeach; ?>
				
			</div>
		</div>
	</section>	
	<?php endforeach; ?>
	
	<?php else : ?>
	
	<?php foreach ($list as $item) : ?>
	<div class="col-md-4">
		<div class="single_menu_list">
			<?php
				$article_images  = json_decode($item->images);
				$article_image   = '';
				$article_image_alt   = '';
				if(isset($article_images->image_intro) && !empty($article_images->image_intro)) {
					$article_image  = $article_images->image_intro;
					$article_image_alt  = $article_images->image_intro_alt;
				}?>  					
				
				<img class="" src="/<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
				
				<?php $item->urls = new JRegistry($item->urls); ?>
				<div class="menu_content">
					<h4><?php echo $item->title; ?> <span> <?php echo $item->urls->get('urlatext'); ?></span></h4> 
					<p class="mod-articles-category-introtext">
						<?php echo $item->displayIntrotext; ?>
					</p>					
				</div>
		</div>
	</div>
	<?php endforeach; ?>	
	<?php endif; ?>
</div>

CSS

.pt-100{
    padding-top:100px;
}
.pb-100{
    padding-top:100px;
}
.mb-60 {
	margin-bottom: 60px;
}
.section-title-menu p {
	font-size: 24px;
	font-family: Oleo Script;
	margin-bottom: 0px;
	margin-top:50px;
}
.section-title-menu h4 {
	font-size: 40px;
	text-transform: capitalize;
	color: tomato;
	position: relative;
	display: inline-block;
	padding-bottom: 25px;
}
.section-title-menu h4::before {
	width: 80px;
	height: 1.5px;
	bottom: 0;
	left: 50%;
	margin-left: -40px;
}
.section-title-menu h4::before, .section-title-menu h4::after {
	position: absolute;
	content: "";
	background-color: tomato;
}
.single_menu_list img {
	max-width: 30%;
	position: absolute;
	left: 0px;
	top: 0;
	border: 1px solid #ddd;
	padding: 3px;
	border-radius: 50%;
	transition: .4s;
}
.menu_style .single_menu_list img {
	position: static;
	width: 100%;
	display: block;
	margin: 0 auto;
	margin-bottom: 45px;
}
.single_menu_list h4 {
	font-size: 20px;
	border-bottom: 1px dashed #333;
	padding-bottom: 15px;
	margin-bottom: 10px;
}
.single_menu_list h4 span {
	float: right;
	font-weight: bold;
	color: tomato;
	font-style: italic;
}
.menu_style .single_menu_list {
	text-align: center;
}
.single_menu_list:hover img {
	border-radius: 0;
	transition: .4s;
}

web-eau.net

France - 29800 Landerneau

+33 674 502 799

daniel@web-eau.net