Here’s an attempt, using vanilla JS and some CSS:
document.querySelector('#example_form input').addEventListener('focus', toggleSearch);
document.querySelector('#example_form input').addEventListener('blur', toggleSearch);
function toggleSearch() {
const form = document.querySelector('#example_form');
const menu = document.querySelector('.menu__list');
if (menu.classList.contains('expanded')) {
menu.classList.remove('expanded');
form.removeAttribute('style');
} else {
menu.classList.add('expanded');
form.style.marginLeft = -(form.getBoundingClientRect().left - 8) + 'px';
form.style.width = menu.offsetWidth + 'px';
}
}.menu__list {
display: flex;
align-items: center;
list-style-type: none;
position: relative;
justify-content: space-around;
padding: 0;
overflow: hidden;
}
.menu__item {
padding: 4px 8px;
max-width: 100px;
white-space: nowrap;
}
.menu__item_search_button {
flex-grow: 1;
}
#example_form input {
flex-grow: 1;
width: 100%;
}
#example_form {
display: flex;
width: 100%;
display: flex;
align-items: stretch;
transition: all .35s cubic-bezier(.4, 0, .2, 1);
}
#example input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 100%;
background: #f1f1f1;
}<ul class="menu__list">
<li class="menu__item"><a class="menu__link" target="_self" href="#">Catalogue</a></li>
<li class="menu__item"><a class="menu__link" target="_self" href="#">Product Range</a></li>
<li class="menu__item"><a class="menu__link" target="_self" href="#s">News</a></li>
<li class="menu__item"><a class="menu__link" target="_self" href="#">Technology</a></li>
<li class="menu__item"><a class="menu__link" target="_self" href="#">Stockists</a></li>
<li class="menu__item"><a class="menu__link" target="_self" href="#">Videos</a></li>
<li class="menu__item_search_button">
<form id="example_form" action="/action_page.php">
<input id="example" type="text" name="theTextInput" />
<button type="submit" id="submit__search"><img src="https://img.icons8.com/ios-glyphs/24/000000/search.png"/></button>
</form>
</li>
</ul>
